Css 元素在'；他继续盘旋

我有一个提示在css中通过：hover:before显示。唯一的问题是，当您将鼠标悬停在该元素上时，该元素将消失，尽管提示会出现。有人知道我应该调整什么吗

html:

---

您的问题是，箭头是使用

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

这样做的目的是将元素

的

：before

伪元素设置为上述内容

现在，当您悬停时，您可以将此元素的内容

：before

pseudo元素更改为：

.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;
}

---

另外，别忘了将class

righticon

添加到

arrowdown

div

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

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

$（'.content'）。前缀（“”）；
.箭头向下{
颜色：浅灰色；
z指数：99；
位置：固定；
顶部：20px；
右：37px；
填充：10px；
}
.箭头向下：悬停{
填充：10px；
颜色：#007fd4；
光标：指针；
}
.箭头向下：悬停：在{
内容：attr（tip）；
浮动：左；
颜色：#007fd4；
字体系列：“Muli”，无衬线；
字体大小：16px；
利润率：7px 5px；
}

@LauraNMS好吧，那么还有一些东西不能正常工作。你能创造一个复制你的问题的小提琴吗？因为我真的没有发现你上面的代码有什么问题，除了冗余的代码。播放视频时，将鼠标悬停在右角的向下箭头上。或者，当视频播放完毕后，单击重播图标，然后将鼠标悬停在右角的向下箭头上。#调整：以这种方式播放时，工具提示根本不会出现。

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

.righticon: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;
}