0

在以下 HTML 中， 的初始位置.layer设置为top: -100%，我想在将鼠标悬停在.imagediv 上时更改它。我正在尝试以下代码，但它似乎在悬停时没有做任何事情。

HTML：

<div class="box">
    <div class="image">
        <a href="#"><img src="http://farm9.staticflickr.com/8356/8332233161_18e3a75de0_m.jpg" ></a>
    </div>
    <div class="layer">Hide it first, show on hover over image</div>
     <div class="other">other</div>
</div>

CSS：

.box{
    border: 1px solid red;
    width: 240px;
}

.box .image{
    position: relative;
    overflow: hidden;    
}

.box .layer{
    width: 240px;
    height: 146px;
    background: green;
    position: absolute;
    top: -100%;
}

.box .image:hover .layer{
    top: 0  
}

JSFiddle：http: //jsfiddle.net/pY9jx/

4

2 回答 2

6

问题是您使用的选择器，元素之间的空格意味着第二个元素是前者的后代，而在这种情况下，元素是相邻的兄弟姐妹，使用+组合器描述的关系；所以：

.image:hover + .layer,
.layer:hover {
    top: 0  
}

JS 小提琴演示。

我还定义了适用于 的规则的原因.layer:hover是为了避免将放在光标下时会导致的闪烁，这会停止选择器的应用（实际上，“在路上”）。.layer.layer:hover.layer

参考：

于 2013-01-01T12:02:18.740 回答
1

悬停状态的样式规则适用于.box .image:hover .layer. 这意味着它将应用于layer嵌套在 class 元素中的 class 元素image。但是，在您当前的代码中，layer元素没有嵌套在image元素内。

要解决这个问题，只需将layer元素移动到image元素中，如下所示：

<div class="box">
<div class="image">
    <a href="#"><img src="http://farm9.staticflickr.com/8356/8332233161_18e3a75de0_m.jpg" ></a>
    <div class="layer">Hide it first, show on hover over image</div>
</div>
<div class="other">other</div>

在这里测试它：http: //jsfiddle.net/pY9jx/3/

于 2013-01-01T12:07:16.273 回答