我正在尝试编写在图像上显示文本的代码,并且正在尝试实现悬停效果。我将代码发布在 http://codepen.io/kikibres/pen/LVxmBG这样你就可以看看它是如何工作的。如您所见,当您将鼠标悬停在图像上时,它变暗了,但文本背景不受影响。同样,当您将鼠标悬停在文本背景上时,图像效果不会被激活。我想将它们连接在一起,但是如何呢?看来我可能需要编辑 html,我想?
HTML代码:
<div class="fourcolumns">
<div class="productpic">
<a href="#">
<img src="http://i.imgur.com/SZen19w.png" alt="Scuba">
<h2 class="captioncolumn"><span>SCUBA</span></h2>
</a>
</div>
</div>
CSS 代码:
.fourcolumns { width: 100%; position: relative; margin: 40px 0;}
.productpic { width: 25%; float: left; display: inline-block; position: relative; margin: 0; padding: 0; background-color: #000000;}
.productpic a { }
.productpic img { width: 100%; opacity: 1;}
.productpic img:hover { opacity: 0.5;}
.productpic .captioncolumn { width: 80%; /*height: 50px;*/ background-color: #ffffff; position: absolute; top: 20px; left: 0; opacity: 1; padding: 5px 0 5px 20px;}
.productpic .captioncolumn span { font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 36px; position: relative; color: #2a286a; opacity: 1; }
.productpic .captioncolumn:hover { opacity: 0.5;}
最佳答案
使用这个会有帮助 .productpic img:hover .productpic .captioncolumn,.productpic img { opacity: 0.5;}
关于html - 文字图片链接悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30554704/