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

【问题标题】：CSS: Change position of div on hoverCSS：在悬停时更改div的位置
【发布时间】：2013-01-01 20:13:37
【问题描述】：

在下面的 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/

【问题讨论】：

标签： html css

【解决方案1】：

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

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

JS Fiddle demo.

我还定义了适用于.layer:hover 的规则的原因是避免the flickering 否则会在.layer 放在光标下时导致.layer:hover 选择器停止应用（如.layer 实际上是“挡道”）。

参考资料：

【讨论】：

感谢您的详细回答。我刚刚在您的示例中添加了边距，但它无法正常工作。即使 .image 位置是相对的， .layer 似乎也不在乎：jsfiddle.net/pY9jx/12

【解决方案2】：

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

【讨论】：