WordPress.org

Support

Support » Themes and Templates » Menu Hover Colours

Menu Hover Colours

  • in3clicks
    Member

    @in3clicks

    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

Viewing 15 replies - 1 through 15 (of 20 total)
  • 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.

    hmmmm use the css code to hover

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

    @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.

    in3clicks
    Member

    @in3clicks

    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

    in3clicks
    Member

    @in3clicks

    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]

    #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

    in3clicks
    Member

    @in3clicks

    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 🙂

    “li:hover to li a:hover “

    Yup you get it and try.

    Good luck .

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

    in3clicks
    Member

    @in3clicks

    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 🙂

    in3clicks
    Member

    @in3clicks

    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? 😀 *blush*

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

    🙂

    in3clicks
    Member

    @in3clicks

    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 🙂

    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 🙂

    in3clicks
    Member

    @in3clicks

    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,
Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Menu Hover Colours’ is closed to new replies.