Javascript 悬停在CSS不透明度同级子元素中

我试图使图像在悬停状态下半透明，并在其上显示文本

我已经实现了一个纯CSS解决方案，但它有一个问题：当我将鼠标悬停在图像上时，文本（一个链接）会显示出来，但如果我将鼠标移到这个链接上，它会松开图像上的悬停，并开始闪烁，因为它被一个悬停循环“unhover”捕获

示例将更加明确，因此下面是我的代码：

CSS部分：

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

使用绝对位置将文本放置在图像上。由于链接是.hoverDisplay的子项，这个跨度是绝对定位的，我想我不能用CSS来阻止链接上的悬停

我知道我可以添加JS作为解决方法（当我进入图像时添加一个类，当我离开图像时删除），但我更愿意使用CSS，尽管我怀疑这是不可能的

---

谢谢你的回答：-）

把你的CSS大幅削减怎么样

（

框内的一个

标记，您可以随意调整）

我只是将

span

tag

absolute

定位到容器元素，也在这里转换不透明度，但我还使用

rgba（）

使元素背景稍微不透明

---

从无到有，简化了想法

在这里写什么
div{
浮动：左；
边框：1px实心#aaa；
位置：相对位置；
}
分区跨度{
位置：绝对位置；
身高：100%；
宽度：100%；
背景：rgba（255255,5）；
排名：0；
左：0；
不透明度：0；
-webkit过渡：全部5秒；
-moz转换：全部为0.5s；
过渡：全部5秒；
}
分区：悬停范围{
不透明度：1；
}

把你的CSS大幅削减怎么样

（

框内的一个

标记，您可以随意调整）

我只是将

span

tag

absolute

定位到容器元素，也在这里转换不透明度，但我还使用

rgba（）

使元素背景稍微不透明

---

从无到有，简化了想法

在这里写什么
div{
浮动：左；
边框：1px实心#aaa；
位置：相对位置；
}
分区跨度{
位置：绝对位置；
身高：100%；
宽度：100%；
背景：rgba（255255,5）；
排名：0；
左：0；
不透明度：0；
-webkit过渡：全部5秒；
-moz转换：全部为0.5s；
过渡：全部5秒；
}
分区：悬停范围{
不透明度：1；
}

添加

指针事件：无在您的文本上
这样，它不会影响您的悬停。

有关指针事件的更多信息：
添加
指针事件：无在您的文本上
这样，它不会影响您的悬停。

有关指针事件的更多信息：
对悬停状态进行一些调整：

稍微调整一下悬停状态：

我希望这是一个很酷的解决方案。。。不过，在一段时间内，它看起来不像是非常跨浏览器的<代码>警告：在CSS中对非SVG元素使用指针事件是实验性的。该功能曾是CSS3 UI草案规范的一部分，但由于许多未决问题，已推迟到CSS4。
感谢您的想法，不知道该属性，看起来很不错，尽管如前所述，我无法实现它，因为它太过实验性！我希望这是一个很酷的解决方案。。。不过，在一段时间内，它看起来不像是非常跨浏览器的<代码>警告：在CSS中对非SVG元素使用指针事件是实验性的。该功能曾是CSS3 UI草案规范的一部分，但由于许多未决问题，已推迟到CSS4。

感谢您的想法，不知道该属性，看起来很不错，尽管如前所述，我无法实现它，因为它太过实验性！使用父元素是个不错的主意，我不知道我怎么没有想到这一点（在屏幕前花太多时间似乎是一个合理的解释）。这绝对是我要尝试的。工作得很好。谢谢；-）@MichaelLumbroso you welcome:）我还添加了一个简化版本使用父元素的好主意，不知道我怎么会没有想到这一点（在屏幕前花费太多时间似乎是一个合理的解释）。这绝对是我要尝试的。工作得很好。谢谢；-）@MichaelLumbroso you welcome:）我还添加了一个简化版本

.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;
}

<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;    
}

.fadeImg:hover, .teamImg:hover .fadeImg {
    opacity: 0.5;
}
.fadeImg:hover~.hoverDisplay, .teamImg:hover .hoverDisplay {
    display: block;
}