元素悬停时消失答案

【问题标题】：element disappears when it's hovered on元素悬停时消失
【发布时间】：2014-07-03 16:26:37
【问题描述】：

我有一个提示通过 :hover:before 在 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;
    }

【问题讨论】：

标签： css hover pseudo-element

【解决方案1】：

我对你的代码做了一些修改，它正在工作。

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】：

您的问题是箭头放置在网页上使用

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

它的作用是将元素<i>的: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 div 中

【讨论】：

@LauraNMS 那么还有其他东西不能正常工作。您可以创建一个复制您的问题的小提琴吗？因为除了冗余之外，我真的看不出你上面的代码有什么问题
地址为newsinteractive.post-gazette.com/odysseys/#belarus。播放视频时，将鼠标悬停在右上角的向下箭头上。或者，视频播放完毕后，点击“重播”图标，然后将鼠标悬停在右上角的向下箭头上。
#Adjit：当我这样做时，工具提示根本不会出现。