无法在可见的溢出内容上使用悬停

时间:2013-02-21 19:37:55

标签: jquery css hover overflow jquery-hover

不幸的是,我发现自己试图解决一个不完全支持我需求的布局。也就是说,完全改变它目前不是一种选择。

那就是说,我基本上有一些溢出的内容,我设置溢出:可见,同时还有一个白色空间:nowrap。这基本上就像一个列跨度。

这是一个Js Fiddle

由于SO需要它,这里有一些示例代码。

html:

<div class='container'>
<div class='third'>one</div>
<div class='third'>two</div>
<div class='third'>three</div>
</div>
<div class='container'>
<div class='third overflow'>this is some really long <a> hover </a></div>
<div class='third'>&nbsp;</div>
<div class='third'>has to align w/ three</div>
</div>

css:

div {float:left;}
div.third {width: 33%;}
div.container {width: 400px;overflow:hidden;}
div.overflow { overflow:visible; white-space:nowrap;}
a {color: green;font-weight:bold;}
a:hover {color: red; }

js:

$(document).ready(function () {

$('div.overflow a').bind('mouseenter', function() {
    alert('mouse enter');
});

$('div.overflow a').bind('hover', function() {
    alert('hover');
});
/* just to prove it is wired up */
$('div.overflow a').trigger('hover');});

1 个答案:

答案 0 :(得分:1)

第一个问题不是溢出,而是以下.third元素位于其上并且吸收鼠标事件的事实。

要解决此问题,请在position:relative元素上添加z-index:999div.overflow a

第二问题是hover不是事件。它是mouseentermouseleave事件的快捷方式。

所以你需要以下面的方式使用它(注意它会为进入和离开而触发)

$('div.overflow a').hover(function() {
    alert('hover');
});

演示 http://jsfiddle.net/D639t/3/使用console.log代替alert