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

我有两个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的方法

来源

2017-08-08 lilixiaocc

正如OP在此答案的评论中所述（但不是在他的问题中），纯CSS不是他的选择。虽然我现在还不能100％确信有关此要求，这里是一个纯粹的jQuery解决方案：

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

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

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

 
.hover { 
 
    \t font-size: 15px; 
 
\t color: #15428B; 
 
\t width: 200px; 
 
\t text-overflow: ellipsis; 
 
\t white-space:nowrap; 
 
\t 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>

来源

2017-08-08 19:33:04 Toastrackenigma

为什么我使用jQuery的原因是因为最近铬更新后，我的悬停后，每一次，文本消失和开发工具，文本不隐藏。所以我切换到jQuery。 – lilixiaocc

@lilixiaocc所以，你不能使用普通的CSS来做到这一点？这应该在你的问题中说明，因为这是你的问题的明显解决方案。你应该回去编辑它。 – Toastrackenigma

@lilixiaocc你的评论没有任何意义 - 从最近的chrome更新*开始，以及你使用jQuery的原因如此平庸。 –

尝试是这样的：

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

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

来源

2017-08-08 19:36:50

正如OP在我的回答的评论中所说的，他不能使用CSS来做到这一点。 – Toastrackenigma

@ Toastrackenigma，谢谢你让我知道。我没有看到这个评论。作为一般信息，我暂时将答案留在原地。 –

是的，它实际上是一个非常好的解决方案 - 我被抓出来做一个CSS的答案了。似乎有点怪异的TBH要求。 – Toastrackenigma

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

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

我已在相应的JSFiddle一些变化，请检查。

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

来源

2017-08-14 10:22:09 vivekkupadhyay

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

回答

相关问题