0

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

我已经实现了一个纯 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,尽管我怀疑这是不可能的。

感谢您的回答:-)

4

3 回答 3

3

在很大程度上削减你的 CSS 怎么样?

演示

Demo 2a盒子内的标签,你可以调整)

.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()用于使元素背景略微不透明。


从头开始,简化想法

演示 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;    
}
于 2013-08-13T18:36:48.057 回答
1

添加pointer-events: none;你的文字。
这样,它不应该影响您的悬停。

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

于 2013-08-13T18:37:23.230 回答
0

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

.fadeImg:hover, .teamImg:hover .fadeImg {
    opacity: 0.5;
}
.fadeImg:hover~.hoverDisplay, .teamImg:hover .hoverDisplay {
    display: block;
}
于 2013-08-13T19:01:31.130 回答