Question

我有两个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 Canary，它正在运行，使用旧的CSS方法和@ Toastrackenigma的方法

Answer 1

正如OP在这个答案的评论中所说的那样（但在他的问题中没有），普通的CSS对他来说不是一个选择。虽然我仍然不是100％相信这个要求，但这里有一个纯粹的jQuery解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试这样的事情：

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

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

Answer 3

首先，除非您将text-overflow: ellipsis标记定义为{{1}，否则使用width与固定white-space: nowrap;，overflow:hidden和span的{{1}}将无法正常工作}或display: inline-block。

其次，由于未使用display: block和z-index而发生重叠。

我已相应地对JSFiddle进行了一些更改，请检查。

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

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

3 个答案: