文字图片链接悬停答案

【问题标题】：Text image link hover文字图片链接悬停
【发布时间】：2015-08-13 19:16:38
【问题描述】：

我正在尝试编写在图像上显示文本的代码，并且我正在尝试实现悬停效果。我将代码发布在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;}

【问题讨论】：

标签： html css image hover

【解决方案1】：

好的。根据您的评论，建议使用该方式-

.productpic img:hover + h2{ background:transparent;}
.productpic img:hover {
    opacity: 0.5;
}

link

【讨论】：

谢谢，但现在悬停时文本是透明的。我希望文本是纯色的，但白色背景是透明的。

【解决方案2】：

这一切都归结为一个将所有内容联系在一起的链接，因此无论将鼠标悬停在框的哪个区域，它都会被激活，而不是一个区域，当悬停时，显示悬停效果而其他区域不显示悬停效果。但是，我不希望文本框在悬停效果中受到影响。因此，我四处寻找仅在父链接中激活子元素的答案。答案如下：

.productpic a:hover img { opacity:0.5; }

您也可以在http://codepen.io/kikibres/pen/MwJzqO?editors=110查看最终结果

【讨论】：

【解决方案3】：

使用它会有所帮助 .productpic img:hover .productpic .captioncolumn,.productpic img { opacity: 0.5;}

【讨论】：