CODEWITHSUNDEEP
htmlcsscss-selectorshover
MG1
MG1

Reputation: 1687

hovering not working on div

I am trying to apply a hover effect on a div. Why isn't this working at all?

My Html looks like this:

<a href="#panel-866" id="panel-866">
  <div class="application-icon" style="background-image: url('/custom-icon-off.png')">
&nbsp;</div>
</a>

CSS

.tab-title > #panel-866 .application-icon:hover {
    background-image:url(/custom-icon-hover.png);
}

Upvotes: 2

Views: 95

Answers (4)

Michael Benjamin
Michael Benjamin

Reputation: 372079

You need to override the inline styles, which have higher specificity than external / embedded styles.

Try this:

#panel-866 > .application-icon:hover { 
    background-image:url('/custom-icon-hover.png') !important;
}

Here's a demo: https://jsfiddle.net/0aghvn3u/

Upvotes: 1

symlink
symlink

Reputation: 12208

There are a few problems with your code, so it's hard to say what specifically is causing the problem. You have a div element in an a tag, which you should avoid because block level elements don't work well within inline elements. This is likely not the problem, though.

I've added some markup and removed some CSS that included a selector not in the code you presented here that might have caused the effect not to work:

<a href="#panel-866" id="panel-866">
    <span class="application-icon" style="background-image: url('http://lorempixel.com/400/400')">
        &nbsp;
    </span>
</a>

and

#panel-866 .application-icon {
    height: 400px;
    width: 400px;
    display: block;
}

#panel-866 .application-icon:hover {
    background-image: url(http://lorempixel.com/200/400) !important;
}

Notice I made the inline span element display:block (this is technically "allowed") so I could give it a width and height. Even when on a div element, background images need a width and height to display.

Secondly, as the other posters mentioned, adding an !important declaration to your :hover style rule is needed because browsers will always override internal or external style rules with inline ones.

https://jsfiddle.net/3b2ywp5b/

Upvotes: 0

Praveen
Praveen

Reputation: 2419

Make it important so it overrides the anchor tag's default hover styles. 

.tab-title > #panel-866 .application-icon:hover {
    background-image:url('/custom-icon-hover.png') !important;
}

Upvotes: 0

Torsten Barthel
Torsten Barthel

Reputation: 3486

The '>' - selector gets direct descendants, maybe just remove

.tab-title >

and it will work. Difficult to say without knowing your markup since its a simple task and your solution seems to be correct.

Upvotes: 0

Related Questions