Question

我有一个提示通过：hover：before in css。唯一的问题是，当你悬停在它上面时，悬停在其上的元素会消失，尽管提示会出现。有人知道我应该调整什么吗？

HTML：

<body>
<div class="content">
(...content of page)
</div>
</body>

jquery的：

$('.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;
    }

Answer 1

您的问题是使用

将箭头放在网页上

.fa-arrow-circle-o-down:before { content: "\f01a"; }

这样做是将元素<i>＆＃39; s :before伪元素设置为上述内容。

现在，当您将鼠标悬停时，将此元素:before伪元素的内容更改为：

.vidclose:hover:before {
    content: attr(tip);
    margin-right: 35px;
    color: #007fd4;
    font-family: "Muli", sans-serif;
    font-size: 16px;
    position: relative;
    top: -6px;
}

所以，您需要更改:before的内容并删除该箭头。

您的网站为解决此问题的其他元素所做的工作是将:hover:before设置为班级.righticon

因此，请将您的CSS更改为此内容，并将tip属性放在div arrowdown .righticon:hover:before { content: attr(tip); margin-right: 35px; color: #007fd4; font-family: "Muli", sans-serif; font-size: 16px; position: relative; top: -6px; }中，您应该这样做：

righticon

另外，不要忘记将课程arrowdown添加到{{1}} div

Answer 2

我已经修改了一些代码并且它正在运行。

<强> WORKING FIDDLE

$('.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;
}

元素在它徘徊时消失

2 个答案: