CODEWITHSUNDEEP
csshover
mcalahorro
mcalahorro

Reputation: 13

CSS :hover over two elements at the same position

in that code when i try to change the style of two divs positioned on the same place with :hover selector it only affects one div. I try with z-index, but dont work. How can i :hover the two divs at the same time? Thanks!

http://jsfiddle.net/CqhLr/1/

I need to get active the two hover at the same time 

#text1:hover #text2#hover

Upvotes: 1

Views: 3387

Answers (3)

brouxhaha
brouxhaha

Reputation: 4093

Add :hover to your containing div (#button) instead of each of the inner divs: http://jsfiddle.net/CqhLr/3/, so change your current hovers to look like this:

#button:hover #text1 {
    opacity: 0;
}
#button:hover #text2 {
    opacity: 1;
}

Upvotes: 4

Last1Here
Last1Here

Reputation: 1079

You can do this with the sibling selector Fiddle, More information on siblings.

#text1 {
    position: absolute;
    top: 25px;
    left: 25px;
    opacity: 1;
    z-index:10;
}
#text1:hover + #text2 {
    opacity: 1;
}
#text1:hover {
    opacity: 0;
}

Upvotes: 0

v0wels
v0wels

Reputation: 55

Check out my pen at http://codepen.io/anon/pen/KEAvg

Move #text2 above #text1, add z-indexes, and change the selectors in the hovers.

Upvotes: 0

Related Questions