不幸的是,我发现自己试图解决一个不完全支持我的需求的布局。也就是说,完全改变它目前不是一种选择。
就是说,我基本上有一些溢出内容,我设置了 overflow:visible 和 white-space: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'> </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');});
最佳答案
1st 问题不是溢出,而是下面的 .third
元素在它之上并且它吸收鼠标事件..
要解决此问题,请在 div.overflow a
元素上添加 position:relative
和 z-index:999
。
第二个 问题是hover
不是一个事件。它是 mouseenter
和 mouseleave
事件的快捷方式。
所以你需要按以下方式使用它(注意它会在进入和离开时触发)
$('div.overflow a').hover(function() {
alert('hover');
});
演示在 http://jsfiddle.net/D639t/3/ (使用 console.log
而不是 alert
)
关于jquery - 无法在可见的溢出内容上使用悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15010766/