Question

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

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

示例将更加明确，因此这是我的代码：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;    
}

Answer 2

在文字上添加pointer-events: none;。
这样，它不会影响您的悬停。

有关指针事件的更多信息：
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events?redirectlocale=en-US&redirectslug=CSS%2Fpointer-events

Answer 3

对悬停状态稍作调整： http://jsfiddle.net/zm2Jt/8/

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

将鼠标悬停在CSS opacity sibling子元素中

3 个答案: