是:悬停仅限于子元素?

时间:2011-12-15 17:38:34

标签: css css3 css-selectors

我刚刚在答案中看到了这段代码:

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 个答案:

答案 0 :(得分:10)

<强> Live Demo

您可以使用adjacent sibling selector

.thumbnail:hover + p {
    background:yellow;
}

答案 1 :(得分:5)

您可以使用以下选择器

.thumbnail:hover + p 

示例:http://jsfiddle.net/6wQp3/2/