我尝试在动态高度的图像上构建叠加(鼠标悬停):
<div id="one-third">
<div class="over_menu">Text</div>
<div class="menu_bg"><img src="one.jpg" class="resp-img"></div>
</div>
CSS
.one-third { width: 33.3333%; }
.menu_bg img { width: 100%; height: auto; }
.menu_bg { position:relative; width: 100%; }
.over_menu { position: absolute; z-index:2; background-color:rgba(0,0,0,0.5); color: #FFFFFF; height: 100%; }
不幸的是&#34; over_menu&#34;是大,它显示直到页面的孔休息。我怎么能这样做。
答案 0 :(得分:2)
将position: relative;
提供给父级,以便其边界位于其中:
.one-third { width: 33.3333%; position: relative; }
答案 1 :(得分:0)
您应该将over_menu
移到menu_bg
<div id="one-third">
<div class="menu_bg">
<div class="over_menu">Text</div>
<img src="one.jpg" class="resp-img">
</div>
</div>
当然,您也应该更改:hover
条件。如果您可以在问题中添加JSFiddle,将会很有帮助。