我对图像悬停有疑问。我正在创建代理页面,并且有“服务”选项卡。有 6 个图像、文本和按钮。
我在将鼠标悬停在图像上时对覆盖进行了编码,但它无法正常工作。当我将鼠标放在图像的一小部分上时它会起作用(例如,当我将鼠标放在图像中间时它不起作用)。
我注意到我的文本 div 有问题。当我删除它时,一切正常。此外,当我更改此 div 的高度时效果很好,但我的按钮改变了它的位置。
如果您知道我该如何解决它,我将不胜感激。
这是我的 HTML 和 Codepen:
<div id="services">
<div class="images">
<div class="row1">
<div class="img1">
<img src="http://images82.fotosik.pl/266/994510792e940bac.jpg"/>
<div class="imgHover"><p>Professional Analysys</p></div>
</div>
<div class="img2">
<img src="http://images81.fotosik.pl/266/ba83ea8331da15ef.jpg" />
<div class="imgHover"><p>UX/UI Design</p></div>
</div>
<div class="img3">
<img src="http://images82.fotosik.pl/266/994510792e940bac.jpg" />
<div class="imgHover"><p>Strategy planning</p></div>
</div>
</div>
<div class="row2">
<div class="img4">
<img src="http://images81.fotosik.pl/266/ba83ea8331da15ef.jpg" />
<div class="imgHover"><p>SEO & SEM</p></div>
</div>
<div class="img5">
<img src="http://images82.fotosik.pl/266/994510792e940bac.jpg" />
<div class="imgHover"><p>Web Development</p></div>
</div>
<div class="img6">
<img src="http://images81.fotosik.pl/266/ba83ea8331da15ef.jpg" />
<div class="imgHover"><p>Social Media</p></div>
</div>
</div>
</div>
<div class="services-text">
<p>We specialize in delivering the best solutions for your business. Our professional team works every day to satisfy you and improve your incomes.</p>
<button href="#">Request a call</button>
</div>
</div>
最佳答案
在 images
类上添加 z-index
.images {
text-align: center;
max-width: 750px;
max-height: 1400px;
margin: 0 auto;
position: relative;
bottom: 100px;
z-index: 9;
}
关于html - 鼠标在特定位置时图像悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41442287/