Question

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

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/

Answer 1

问题是你正在使用的选择器，元素之间的空格意味着第二个元素是前者的后代，而在这种情况下，元素是相邻的兄弟，使用+组合子描述的关系;因此：

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

JS Fiddle demo

我之前还定义了要应用于.layer:hover的规则的原因是为了避免.layer在.layer:hover置于光标下方时产生的the flickering停止.layer选择器应用（因为{{1}}实际上是＆＃39;的方式＆＃39;）。

参考文献：

Answer 2

悬停状态的样式规则适用于.box .image:hover .layer。这意味着它将应用于嵌套在类layer的元素中的类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/

CSS：在悬停时更改div的位置

2 个答案: