我想知道您能否告诉我如何将鼠标悬停在要放置在触发文本所在位置的文本上?截至目前,当您将鼠标悬停在触发文本上时,鼠标悬停在文本底部会淡出吗?
在这里摆弄:http://jsfiddle.net/kenhimself/yhhzy9vq/5/
CSS:
div.centered {
font-size: 5vh;
}
span.ok {
opacity:1;
}
span.ok:hover, span.ok:focus {
opacity:0;
}
span.ok:hover + span.no {
opacity:1;
}
span.no {
opacity:0;
}
span.ok, span.no {
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
}
span {
margin: 0 auto;
display: table;
font-size: 5vh;
line-height: 1;
white-space: nowrap;
}
最佳答案
使用伪元素和 rgba()
值作为 color
并转换 color
属性而不是转换 opacity
.
html, body {
width: 100%;
height: 100%;
margin: 0;
font-size: 100%;
font-family: helvetica;
font-weight: normal;
font-style: normal;
}
div.centered {
font-size: 5vh;
}
span.ok {
position: relative;
color: rgba(0, 0, 0, 1);
-webkit-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
span.ok:after {
content: attr(data-tooltip);
position: absolute;
left: 0;
transform: translateX(-25%);
z-index: -1;
color: rgba(0, 0, 0, 0);
-webkit-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
span.ok:hover:after {
color: rgba(0, 0, 0, 1)
}
span.ok:hover {
color: rgba(0, 0, 0, 0);
}
span {
margin: 0 auto;
display: table;
font-size: 5vh;
line-height: 1;
white-space: nowrap;
}
<div class="centered">
<span data-tooltip="hello hoverover" class="ok">My Link</span><br/>
<span data-tooltip="hello hoverover" class="ok">My Link</span><br/>
<span data-tooltip="hello hoverover" class="ok">My Link</span><br/>
<span data-tooltip="hello hoverover" class="ok">My Link</span><br/>
<span data-tooltip="hello hoverover" class="ok">My Link</span><br/>
</div>
关于html - 如何将鼠标悬停在文本上以与触发文本处于相同的行高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27856396/