Question

我尝试在动态高度的图像上构建叠加（鼠标悬停）：

<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;是大，它显示直到页面的孔休息。我怎么能这样做。

Answer 1

将position: relative;提供给父级，以便其边界位于其中：

.one-third { width: 33.3333%; position: relative; }

Answer 2

您应该将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，将会很有帮助。

图像宽度动态高度叠加

2 个答案: