CSS：更改悬停div的位置

在下面的HTML中，.layer的初始位置设置为top: -100%，我想将其悬停在.image div上时将其更改。我正在尝试下面的代码，但它似乎没有做任何悬停。CSS：更改悬停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/

来源

2013-01-01 user1355300

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

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

JS Fiddle demo。

，我还定义要应用于.layer:hover规则的原因是为了避免the flickering当.layer放置光标，它停止.layer:hover选择器施加（下，否则结果为.layer是，有效地，'在'的方式'）。

参考文献：

来源

2013-01-01 12:02:18

谢谢你的详细解答。我刚刚在您的示例中添加了保证金，但无法正常工作。即使.image位置是相对的，.layer似乎并不关心：http://jsfiddle.net/pY9jx/12/ – user1355300

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

测试它：

为了解决这个问题，只需将layer元素搬进image元素，像这样http://jsfiddle.net/pY9jx/3/

来源

2013-01-01 12:07:16 Boaz

CSS：更改悬停div的位置

回答

相关问题