Ограничивается ли: hover только дочерними элементами? - PullRequest
7 голосов
/ 15 декабря 2011

Я только что видел этот код в ответе:

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;
}

Демонстрация здесь: http://jsfiddle.net/6wQp3/

Чтобы этот код работал, .overthumb должен быть потомком .thumbnail.

Но если у кого-то есть этот код:

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

Как бы вы выбрали тег p, если наведен .thumbnail?

Ответы [ 2 ]

10 голосов
/ 15 декабря 2011

Демонстрация в реальном времени

Вы можете использовать соседний селектор брата

.thumbnail:hover + p {
    background:yellow;
}
5 голосов
/ 15 декабря 2011

Вы можете использовать следующий селектор

.thumbnail:hover + p 

Пример: http://jsfiddle.net/6wQp3/2/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...