1

残念ながら、自分のニーズを正確にサポートしていないレイアウトを回避しようとしていることに気づきました。とはいえ、それを完全に変更することは現在のところオプションではありません。

そうは言っても、私は基本的に、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'>&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

2番目の問題は、hoverがイベントではないことです。mouseenterこれは、およびmouseleaveイベントへのショートカットです。

したがって、次のように使用する必要があります（入場と退場の両方で起動することに注意してください）

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

http://jsfiddle.net/D639t/3/でのデモ（の代わりに使用console.logalert）

于 2013-02-21T19:46:57.570 に答える