悬停后，文字似乎总是显示答案

【问题标题】：After hover, text seems always showing悬停后，文字似乎总是显示
【发布时间】：2017-08-14 18:22:09
【问题描述】：

我有两个div，一个在另一个之上。 div 都有一个 span 与文本是省略号，我想要做的是将鼠标悬停在 span 上时，显示文本。但是现在，第一次悬停后，下一次悬停到顶部span，第二个span 的文字还在，有点像transparent。

编辑：我之前使用 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;

}

这里是jsFiddle

$('.hover').on('mouseover', function() {
  $(this).css({
    'overflow': 'visible',
    'white-space': 'normal',
    'min-width': '200px',
    'background-color': 'rgba(229,229,229,1)',
    'z-index': '100',
    'position': 'relative',
    'font-family': 'Verdana'
  })
})

$('.hover').on('mouseleave', function() {
  $(this).css({
    'font-size': '15px',
    'color': '#15428B',
    'background-color': 'rgba(255,255,255,0)',
    'width': '200px',
    'text-overflow': 'ellipsis',
    'white-space': 'nowrap',
    'overflow': 'hidden'
  })
})

.box {
  height: 20px;
  float: left;
  clear: left;
  border: 1px solid black;
  width: 200px;
}

.hover {
  font-size: 15px;
  color: #15428B;
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'><span class='hover'>Hello World!Hello World!Hello World!Hello World!Hello World!Hello World
</span></div>
<br>
<div class='box'><span class='hover'>Hello World!Hello World!Hello World!Hello World!Hello World!Hello World
</span></div>

所以，正如我提到的，这可能是 chrome 问题。我卸载了我的 chrome 并正在使用 Chrome Canary，它可以使用旧的 CSS 方法和 @Toastrackenigma 的方法

【问题讨论】：

标签： javascript jquery html css css-selectors

【解决方案1】：

试试这样的：

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

https://jsfiddle.net/jjn522xz/1/

【讨论】：

正如 OP 在我的回答中所说的那样，他不能使用 CSS 来做到这一点。
@Toastrackenigma，感谢您告诉我。我没有看到那个评论。我现在将我的答案保留为一般信息。
是的，这实际上是一个非常好的解决问题的方法——我也被抓到做一个 CSS 答案。 TBH 的要求似乎有点奇怪。

【解决方案2】：

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

	$('.hover').on('mouseover', function(){
		$(this).css({
				'overflow': 'visible',
				'white-space': 'normal',
				'min-width': '200px',
				'background-color': 'rgba(229,229,229,1)',
				'z-index': '100',
				'position': 'relative',
				'font-family': 'Verdana'
		})
	})

	$('.hover').on('mouseleave', function(){
		$(this).removeAttr("style")
	})

.box {
  height: 20px;
  float:left;
  clear: left;
	border:1px solid black;
  width: 200px;
}

.hover {
 	font-size: 15px;
	color: #15428B;
	width: 200px;
	text-overflow: ellipsis;
	white-space:nowrap;
	overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='box'>
   <span class='hover'>Hello World!Hello World!Hello World!Hello World!Hello World!Hello World
  </span>
</div>
<br>
<div class='box'>
  <span class='hover'>Hello World!Hello World!Hello World!Hello World!Hello World!Hello World
  </span>
</div>

【讨论】：

我使用jquery的原因是因为最近chrome更新后，每次我悬停后，文本消失，在开发工具中，文本没有隐藏。所以我切换到jquery。
@lilixiaocc 那么，你不能使用纯 CSS 来做到这一点吗？这应该在您的问题中说明，因为这是您问题的明显解决方案。您可能应该回去编辑它。
@lilixiaocc 您的评论毫无意义 - 从 最近的 chrome 更新 开始，以及您使用 jQuery 做如此平庸的事情的原因。
对不起，这听起来可能很奇怪，但是在应用您的更改后，文本在悬停后开始消失，就像 CSS 方法一样。不知道是我电脑的原因还是什么，chrome的版本是60.0.3112.90。我希望我可以在某个地方发布一个 gif
@lilixiaocc 这是我机器上的样子：imgur.com/a/7wjXf

【解决方案3】：

首先，除非您将span 标记定义为display: inline-block 或display: block，否则将text-overflow: ellipsis 与固定的width、white-space: nowrap; 和overflow:hidden 一起使用将不起作用。

其次，由于没有使用z-index 和position: relative，会发生重叠。

我对你的JSFiddle做了相应的修改，请查收。

PS：它与最新的 Chrome 更新无关。

【讨论】：