無法使用懸停在可見的溢出內容

Question

不幸的是，我發現自己試圖解決不完全支持我的需求的佈局。也就是說，完全改變它現在不是一種選擇。

這就是說，我基本上有一些溢出的內容，我已經設置溢出：可見與白色空間：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');}); 

Answer 1

的問題不溢出，但事實證明以下.third元素在它上面，它吸收鼠標事件..

要解決此問題，請在div.overflow a元素上添加position:relative和z-index:999。

The 2nd問題是，hover不是一個事件。這是mouseenter和mouseleave事件的快捷方式。

所以你需要使用它以下面的方式（注意，它會火的進入和離開）

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

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