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 回答