WordPress.org

Ready to get started?Download WordPress

Forums

Menu Hover Colours (21 posts)

  1. in3clicks
    Member
    Posted 3 years ago #

    Hi,

    I've been googling a lot today and reading the forums and trying out different methods in style.css and just getting very confused (and probably messing up my site a bit as well!).

    Would someone be able to have a look at my menu and help with how I can get the colour to change to white when you hover?

    Sorry to be a pain :(

    Joe

    http://www.hisbe.co.uk
    login - hello@in3clicks.co.uk

  2. mmson
    Member
    Posted 3 years ago #

    You style the hove on ul? li via css?

    I try on Chrome, the hover is ok, but not in IE because IE do not support :hover for other tags except a.

    So, if you want the li:hover or others tag, you could implemented via js $('').hover(function(){},function(){});
    if you want to implement via css you only set hover on a tag.

    Hope it helps.

  3. ChaMChoM
    Member
    Posted 3 years ago #

    hmmmm use the css code to hover

    .menu a:hover { color:#fff; }

  4. mmson
    Member
    Posted 3 years ago #

    @ChaMChoM
    :) you add addintional info for my post, great.

    @in3clicks
    Yup, move the hover from li to a tag, that would be what you need.

  5. in3clicks
    Member
    Posted 3 years ago #

    hi,

    thank you so much for your replies :) I'll go and have a mess around now, I ended up getting so confused yesterday!

    @mmson - as you added extra info to @ChaMChoM's post would you be able to clarify where i make this change - sorry to be a bit daft!

    :)

    Joe

  6. in3clicks
    Member
    Posted 3 years ago #

    ummm, here's what I've got in style.css - i know, it's messy - probably from my getting very very confused yesterday!

    [code moderated as per forum rules - the stylesheet can be accessed from the link to your site]

  7. mmson
    Member
    Posted 3 years ago #

    #access li:hover > a,

    #access ul ul :hover > a {

    color: #fff;

    background: #8AD4DF;

    }

    I think you should not use li:hover>a.... but li a:hover...
    Which browser do you use the render your page?
    I use Google Chrome render your page, the hover state could be white.

    If you use IE series browsers, the li:hover, and ">" would not be support by IE

  8. in3clicks
    Member
    Posted 3 years ago #

    cool, so it's a matter of changing from li:hover to li a:hover ? Sorry, I know i'm acting really stupid but I think staring at it all day yesterday has left me feeling very silly!

    I use chrome & firefox and neither work for me and a friend uses safari and it's not showing.... I love that the current page you are on is in white text but would love when you hover over another menu item it turns white as it would look lovely :)

    And massive thank you for the reply - I really appreciate it :)

  9. mmson
    Member
    Posted 3 years ago #

    "li:hover to li a:hover "

    Yup you get it and try.

    Good luck .

  10. mmson
    Member
    Posted 3 years ago #

    If not done still, try to not use cufon cufon-canvas,
    Do you use cufon cufon-canvas for font family, right?

  11. in3clicks
    Member
    Posted 3 years ago #

    hmmm, I know I'm being a real pain, have changed that but can't see any change... would you mind checking with your browser?

    *hangs head* sorry!

    Joe :)

  12. in3clicks
    Member
    Posted 3 years ago #

    oh, do you mean cufon in the font family in style.css? I changed this probably in a moment of being stupid/desperate when I wanted this font to show I was just changing stuff to try to make it work.... I'll go and take that out too? :D *blush*

  13. mmson
    Member
    Posted 3 years ago #

    If possible, just make all relate elements away from the cufon.

    :)

  14. in3clicks
    Member
    Posted 3 years ago #

    hehe *major blush* I'm not quite sure what that means but maybe go through style and take out mentions of cufon? I've installed the plugin for cufon and that works nicely - before that I tried a couple of others that just wouldn't work right, we had the font made so really want to use it :)

  15. mmson
    Member
    Posted 3 years ago #

    I search cufon which let user use a non-standard web font family,

    Maybe you search some API for this plugin whether it support hover state for the font :)

  16. in3clicks
    Member
    Posted 3 years ago #

    I'm a bit worried about making changes but do you think the other hover bits I have in are causing a problem too?

    [please mark code with backticks or by using the 'code' button]

    #access li:hover > a,
    
    #access ul ul :hover > a {
    
    color: #fff;
    
    background: #8AD4DF;
    
    }
    
    #access ul ul a {background:#8AD4DF;}
    
    #access ul {color:#572500;} :hover > a {color: #572500;}
    
    #access ul li:hover > ul {
    
    display: block;
    
    }
    
    #access ul li.current_page_item:hover > a {color:#572500;}
    
    #access ul li.current-menu-ancestor > a,
  17. in3clicks
    Member
    Posted 3 years ago #

    ah okay @mmson re. cufon - if that's the problem maybe will have to live with it until I figure out a better solution?

    Sorry about all the questions! I'm kind of hoping to get the site so people can see it later today :)

  18. mmson
    Member
    Posted 3 years ago #

    Try to read this article, some guys seems have same question on hover effect using cufon
    http://galinsimeonov.com/?p=74

  19. in3clicks
    Member
    Posted 3 years ago #

    wow, thank you so much for finding that... i'm going to have a good read and hope it'll get my hovers looking cool :D

    Really appreciate your help *hugs*

    Joe

  20. in3clicks
    Member
    Posted 3 years ago #

    Hey,

    I fixed it, got white hover working now BUT I think this has messed up link hovers in my post area? Sorry to be a pain but I don't want to keep messing it up.... so pleased to see the menu bar behaving!

    Any advice would be super :)

    Joe

  21. rmanroh
    Member
    Posted 3 years ago #

    thanks very much

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.