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

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 并正在使用 Chrome Canary，它可以使用旧的 CSS 方法和@Toastrackenigma 的方法

Answer 1

尝试这样的事情:

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

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