1

Is it possible to maintain a CSS hover effect on an image even when a new layer has been shown on top of it?

For example I have this CSS:

#rit{
background: url(images/rits.png) no-repeat;
height: 295px;
}

#rit:hover{
background: url(images/rits_h.png)  no-repeat;
height: 295px;
}

...and then some separate CSS that adds a 'See More' button. When I hover on the 'Read More' button, the effect from the CSS above is lost.

Andrew Speed
  • 11
  • 1
  • 2

1 Answers1

0

You can attach the Hover to the parent node, or if you need to constrain it more, create a new div for this purpose.

The key is that it has to be the parent of both the image, and the new item (Read More link).

The DOM is a tree structure, anything that applies to one layer applies to all lower layers (unless overridden), and this includes "hover" events. The reason for this is that events are sent UP the tree.

Most likely your Read More link is being created as part of a different subtree like so. Since they are at the same level, the :hover style applies to the Image, and only the DOM nodes that are lower in the tree (in this example, nothing).

http://jsfiddle.net/wNTzV/1/

<div id="parent">
 <img ... />
  <a>Read More</a>
</div>

If you attach the :hover style to the parent, it should affect them simultaneously.

You might also check out this question: Changing the child element's CSS when the parent is hovered with jQuery

Community
  • 1
  • 1
InfernalRapture
  • 572
  • 7
  • 19