我有两个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的方法
为什么我使用jQuery的原因是因为最近铬更新后,我的悬停后,每一次,文本消失和开发工具,文本不隐藏。所以我切换到jQuery。 – lilixiaocc
@lilixiaocc所以,你不能使用普通的CSS来做到这一点?这应该在你的问题中说明,因为这是你的问题的明显解决方案。你应该回去编辑它。 – Toastrackenigma
@lilixiaocc你的评论没有任何意义 - 从最近的chrome更新*开始,以及你使用jQuery的原因如此平庸。 –