我有两个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的方法
答案 0 :(得分:1)
正如OP在这个答案的评论中所说的那样(但在他的问题中没有),普通的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")
})
&#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;
答案 1 :(得分:1)
答案 2 :(得分:0)
首先,除非您将text-overflow: ellipsis
标记定义为{{1},否则使用width
与固定white-space: nowrap;
,overflow:hidden
和span
的{{1}}将无法正常工作}或display: inline-block
。
其次,由于未使用display: block
和z-index
而发生重叠。
我已相应地对JSFiddle进行了一些更改,请检查。
PS:它与最新的Chrome更新无关。