Css element problem

  • Hi Guys,

    https://integra-av.co.uk/

    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("https://www.integra-av.co.uk/wp-content/uploads/2012/11/main_menu3.png") no-repeat 0 0;
       }
Viewing 6 replies - 1 through 6 (of 6 total)

  • Try using Firefox with the Firebug add-on for this kind of CSS work.
    https://getfirebug.com/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Try this:

    #menu-item-792 a:hover

    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.

    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 ??

    Thread Starter danny_getextra

    (@danny_getextra)

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Css element problem’ is closed to new replies.