javascript - 悬停在 CSS opacity 兄弟子元素中

Question

我试图在悬停时使图像半透明，并在其上显示文本。

我已经实现了一个纯 CSS 解决方案，但是它有一个问题:当我将鼠标悬停在图像上时，会显示文本(链接)，但是如果我将鼠标悬停在该链接上，它就会失去悬停在图像，并开始闪烁，因为它陷入了悬停循环，“悬停”。

一个例子会更加明确，所以这是我的代码:http://jsfiddle.net/zm2Jt/3/

CSS 部分:

.fadeImg {
   opacity: 1;
}
.fadeImg~.hoverDisplay {
    display: none;
}
.fadeImg:hover {
    opacity: 0.5;
}
.fadeImg:hover~.hoverDisplay {
    display: block;
}

文本使用绝对位置放置在图像上。由于链接是 .hoverDisplay 的子项，即绝对定位的跨度，我认为我无法使用 CSS 来防止鼠标悬停在链接上。

我知道我可以添加 JS 来解决问题(输入图像时添加类，离开图像时删除类)，但我宁愿使用 CSS，尽管我怀疑这是不可能的。

感谢您的回答:-)

Answer 1

在很大程度上砍掉你的 CSS 怎么样？

Demo

Demo 2 (方框内的 a 标签，您可以调整)

.formContainer .teamImg {
    float: left;
    margin-left: 20px;
    position: relative;
    width: 300px;
}

.teamImg span {
    opacity: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    background: rgba(255,255,255,.5);
    top: 0;
    left: 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

.teamImg:hover span {
    opacity: 1;
}

我只是将 span 标签 absolute 定位到容器元素，我也在此处转换不透明度，但我也使用 rgba() 来制作元素背景略微不透明。

---

从零开始，简化想法

Demo 3

<div>
    <img src="URL_HERE" />
    <span>Write anything here</span>
</div>


div {
    float: left;
    border: 1px solid #aaa;
    position: relative;
}

div span {
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,.5);
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

div:hover span {
    opacity: 1;    
}