1

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

也就是说，我基本上有一些溢出内容，我设置了溢出：可见，还有一个空白：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');});
4

1 回答 1

1

第一个问题不是溢出，而是下面的.third元素在它上面并且它吸收了鼠标事件。

要解决此添加和position:relative元素。z-index:999div.overflow a

第二个问题是这hover不是一个事件。它是mouseenter和mouseleave事件的捷径。

所以你需要按以下方式使用它（注意它会在进入和离开时触发）

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

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

于 2013-02-21T19:46:57.570 回答