Css element problem (7 posts)

  1. danny_getextra
    Posted 2 years ago #

    Hi Guys,


    I've got over 6 months of working as a junior web developer under my belt.
    so working with wordpress is fairly common for me.

    My problem is I can't seem to target the eco friendly tab with a css hover effect. I want the background to go green so I added this style to the style-sheet but it doesn't seem to work.

    the image is a green tab.

    #menu-item-792: hover
            background: url("http://www.integra-av.co.uk/wp-content/uploads/2012/11/main_menu3.png") no-repeat 0 0;
  2. esmi
    Forum Moderator
    Posted 2 years ago #

    Try using Firefox with the Firebug add-on for this kind of CSS work.

  3. Andrew
    Forum moderator
    Posted 2 years ago #

    The hover pseudo element could/should be used with hyperlinks, also remove the space before the pseudo element.

  4. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Try this:

    #menu-item-792 a:hover
  5. esmi
    Forum Moderator
    Posted 2 years ago #

    Um - not strictly correct. IE is pretty good with :hover these days and there are js fixes for earlier versions of IE. Pretty sure that Opera and Chrome (like Firefox) have always honoured :hover.

  6. probably a specificity problem;
    try to use !important on your style or try to find a more specific style;
    compare this with how the other menu list elements' hover states are styled.

    not a WordPress problem ;-)

  7. danny_getextra
    Posted 2 years ago #

    thanks guys it turns out the website has 2 style sheets effecting the styles.

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.