CODEWITHSUNDEEP
jquerycsshoveroverflowjquery-hover
Rob Allen
Rob Allen

Reputation: 2921

unable to use hover on visible overflow content

Unfortunately I find myself trying to work around a layout that doesn't exactly support my needs. That said, changing it totally is not currently an option.

That said, I basically have some overflow content that I have set overflow:visible on with also a white-space:nowrap. This basically acts like a column span.

here is a Js Fiddle

and since SO requires it, here is some sample code.

the 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>

the 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; }

the 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');});

Upvotes: 1

Views: 292

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

The 1st problem is not the overflow, but the fact that the following .third element is on top of it and it absorbs the mouse events..

To resolve this add position:relative and z-index:999 on the div.overflow a element.

The 2nd problem is that the hover is not an event. It is a shortcut to the mouseenter and mouseleave events.

So you need to use it in the following way (note that it will fire for both enter and leave)

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

Demo at http://jsfiddle.net/D639t/3/ (using console.log instead of alert)

Upvotes: 1

Related Questions