Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is :hover only limited to child elements?

I just saw this code in an answer:

HTML

<div class="thumbnail">
    <img src="http://placehold.it/50x50">
    <img class="overthumb" src="http://placehold.it/200x200">
</div>

CSS

.overthumb { display: none; }

.thumbnail:hover .overthumb {
    position: absolute;
    top: 15px; left: 15px;
    display: inline;
}

Live demo here: http://jsfiddle.net/6wQp3/

For this code to work .overthumb must be a child of .thumbnail.

But if some one has this code:

<div class="thumbnail">
    <img src="http://placehold.it/50x50">
</div>
<p>tttttttttt</p>

How would you select the p tag if .thumbnail is hovered?

like image 426
Ali Nouman Avatar asked Dec 15 '11 17:12

Ali Nouman


2 Answers

Live Demo

You can use the adjacent sibling selector

.thumbnail:hover + p {
    background:yellow;
}
like image 55
Loktar Avatar answered Oct 21 '22 02:10

Loktar


You can use the following selector

.thumbnail:hover + p 

Example: http://jsfiddle.net/6wQp3/2/

like image 36
Emil Avatar answered Oct 21 '22 00:10

Emil