Javascript 悬停后，文本似乎总是显示

我有两个

div

，一个在另一个之上。两个

div

都有一个

span

，文本都是省略号，我想做的是当鼠标悬停在

span

上时，显示文本。但是现在，在第一次悬停之后，下一次当你悬停在顶部时，第二次的文本仍然存在，有点像透明的

编辑：我以前使用css而不是Jquery，但在最近的Chrome更新之后，我的鼠标悬停不起作用，所以我不得不使用Jquery

旧CSS：

.hover:hover {
overflow: visible;
white-space: normal;
min-width: 200px;
background-color: #E5E5E5;
z-index: 1000;
position: relative;
font-family: Verdana;

}

这是你的电话号码

$（'.hover'）。在（'mouseover'，function（）上{
$（this.css）({
“溢出”：“可见”，
“空白”：“正常”，
“最小宽度”：“200px”，
“背景色”：“rgba（229229229,1）”，
“z指数”：“100”，
'位置'：'相对'，
“字体系列”：“Verdana”
})
})
$（'.hover'）.on（'mouseleave'，function（）{
$（this.css）({
“字体大小”：“15px”，
“颜色”：“15428B”，
“背景色”：“rgba（255255,0）”，
“宽度”：“200px”，
“文本溢出”：“省略号”，
“空白”：“nowrap”，
“溢出”：“隐藏”
})
})

.box{
高度：20px；
浮动：左；
清除：左；
边框：1px纯黑；
宽度：200px；
}
.悬停{
字体大小：15px；
颜色：#15428B；
宽度：200px；
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}

你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界


你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界

正如OP在回答这个问题的评论中所说（但不是在他的问题中），简单的CSS不是他的选择。尽管我仍然不能100%相信这一要求，但这里有一个纯jQuery解决方案：

$（'.hover'）。在（'mouseover'，function（）上{
$（this.css）({
“溢出”：“可见”，
“空白”：“正常”，
“最小宽度”：“200px”，
“背景色”：“rgba（229229229,1）”，
“z指数”：“100”，
'位置'：'相对'，
“字体系列”：“Verdana”
})
})
$（'.hover'）.on（'mouseleave'，function（）{
$（此）.removeAttr（“样式”）
})

.box{
高度：20px；
浮动：左；
清除：左；
边框：1px纯黑；
宽度：200px；
}
.悬停{
字体大小：15px；
颜色：#15428B；
宽度：200px；
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}

你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界


你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界

正如OP在回答这个问题的评论中所说（但不是在他的问题中），简单的CSS不是他的选择。尽管我仍然不能100%相信这一要求，但这里有一个纯jQuery解决方案：

$（'.hover'）。在（'mouseover'，function（）上{
$（this.css）({
“溢出”：“可见”，
“空白”：“正常”，
“最小宽度”：“200px”，
“背景色”：“rgba（229229229,1）”，
“z指数”：“100”，
'位置'：'相对'，
“字体系列”：“Verdana”
})
})
$（'.hover'）.on（'mouseleave'，function（）{
$（此）.removeAttr（“样式”）
})

.box{
高度：20px；
浮动：左；
清除：左；
边框：1px纯黑；
宽度：200px；
}
.悬停{
字体大小：15px；
颜色：#15428B；
宽度：200px；
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}

你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界


你好，世界！你好，世界！你好，世界！你好，世界！你好，世界！你好，世界

尝试以下方法：

.box:first-child:hover ~ .box > span {
    display: none;
}

---

试试这样的方法：

.box:first-child:hover ~ .box > span {
    display: none;
}

---

首先，使用带有固定宽度的

文本溢出：省略号
，
空白：nowrapspan
标记定义为
display:inline block
或
display:block
，否则code>和
overflow:hidden
将不起作用

其次，由于未使用
z-index
和
position:relative
而出现重叠

我对您的帐户做了一些相应的更改，请检查

PS：这与最新的Chrome更新无关。
首先，使用固定宽度的
文本溢出：省略号
，
空白：nowrapspan
标记定义为
display:inline block
或
display:block
，否则code>和
overflow:hidden
将不起作用

其次，由于未使用
z-index
和
position:relative
而出现重叠

我对您的帐户做了一些相应的更改，请检查

PS：这与最新的Chrome更新无关。
我之所以使用jquery，是因为在最近的Chrome更新之后，每次鼠标悬停后，文本都会消失，而在开发工具中，文本不会隐藏。所以我切换到jquery，你不能用普通的CSS来做这个吗？这应该在你的问题中说明，因为这是你问题的明显解决方案。您可能应该返回并在中编辑它。@lilixiaocc您的评论毫无意义-从最近的chrome更新开始，以及您使用jQuery进行如此平庸的操作的原因。对不起，这听起来可能很奇怪，但在应用更改后，文本在悬停后开始消失，就像CSS方法一样。我不知道是因为我的电脑还是什么，chrome版本是60.0.3112.90。我希望我能发一张gifsomewhere@lilixiaocc这就是它在我的机器上的外观：我之所以使用jquery，是因为在最近的chrome更新之后，每次悬停之后，文本都会消失，而在开发工具中，文本不会隐藏。所以我切换到jquery，你不能用普通的CSS来做这个吗？这应该在你的问题中说明，因为这是你问题的明显解决方案。您可能应该返回并在中编辑它。@lilixiaocc您的评论毫无意义-从最近的chrome更新和您使用jQuery fo的原因开始