我有一个提示通过 :hover:before 在 css 中出现。唯一的问题是，当您将鼠标悬停在其上时，悬停在其上的元素会消失，尽管会出现提示。请问有人知道我应该调整什么吗？
html:
<body>
<div class="content">
(...content of page)
</div>
</body>
j查询:
$('.content').prepend("<div id='arrowdown'><i tip='Return to story' class='fa fa-arrow-circle-o-down fa-2x vidclose'></i></div>");
CSS:
.vidclose {
color: lightgray;
z-index: 99;
position: fixed;
top: 20px;
right: 37px;
padding: 10px;
}
.vidclose:hover{
z-index: 99;
position: fixed;
top: 20px;
right: 37px;
padding: 10px;
color: #007fd4;
cursor: pointer;
}
.vidclose:hover:before {
content: attr(tip);
margin-right: 35px;
color: #007fd4;
font-family: "Muli", sans-serif;
font-size: 16px;
position: relative;
top: -6px;
}
最佳答案
我稍微修改了您的代码，它可以正常工作。
$('.content').prepend("<div class='arrowdown' tip='Return to story'><i class='fa fa-arrow-circle-o-down fa-2x vidclose'></i></div>");
.arrowdown {
color: lightgray;
z-index: 99;
position: fixed;
top: 20px;
right: 37px;
padding: 10px;
}
.arrowdown:hover{
padding: 10px;
color: #007fd4;
cursor: pointer;
}
.arrowdown:hover:before {
content: attr(tip);
float:left;
color: #007fd4;
font-family: "Muli", sans-serif;
font-size: 16px;
margin:7px 5px;
}
关于css - 元素悬停时消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24558962/