Databases
StackOverflow2013
Postsdbo
POMouseleave in jCarousel don't work in Opera and IE
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMouseleave in jCarousel don't work in Opera and IE
    text
    copied!<p>I'm using jCarousel plugin. When I hover an item in jCarousel I need a popup open over this item. I can't use simple hover, because popup is bigger than jCarousel's height (and overflow hidden doesn't let me do this). So I clone this hidden popup (which is placed inside jCarousel's item) and append it to body. Everything works great expect in Opera and IE. Popup appear, but it doesn't leave on mouseleave. It leaves only when I hover other item in jCarousel and it appears again only when I twice hover the item. Well, weird behavior. Can someone help me to sort it out?</p> <p>HTML:</p> <pre><code>&lt;ul id="logo_scroll" class="jcarousel-skin-tango"&gt; &lt;li&gt; &lt;a href=""&gt; &lt;img src="/i/delete/logo_1.png" width="111" height="58" alt="" /&gt; &lt;span&gt;Description 1&lt;/span&gt; &lt;/a&gt; &lt;a href="" class="logo_zoom"&gt; &lt;img src="/i/delete/logo_2_zoom.png" alt=""&gt; &lt;span&gt;Description 1&lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href=""&gt; &lt;img src="/i/delete/logo_2.png" width="111" height="58" alt="" /&gt; &lt;span&gt;Description 2&lt;/span&gt; &lt;/a&gt; &lt;a href="" class="logo_zoom"&gt; &lt;img src="/i/delete/logo_2_zoom.png" alt=""&gt; &lt;span&gt;Description 2&lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href=""&gt; &lt;img src="/i/delete/logo_3.png" width="111" height="58" alt="" /&gt; &lt;span&gt;Description 3&lt;/span&gt; &lt;/a&gt; &lt;a href="" class="logo_zoom"&gt; &lt;img src="/i/delete/logo_2_zoom.png" alt=""&gt; &lt;span&gt;Description 3&lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>jQuery:</p> <pre><code>$('.jcarousel-item').mouseenter(function(){ var find_zoom = $(this).find('.logo_zoom') logo_pos = $(this).offset(), logo_zoom = find_zoom.clone().addClass('zoom_hovered').css('left', logo_pos.left - 10); $('body').append(logo_zoom); if($('.zoom_hovered').length &gt; 1) { $('.zoom_hovered').remove(); } else { $('.zoom_hovered').mouseenter(function(){ $('body').append(logo_zoom); }); $('.zoom_hovered').mouseleave(function(){ $(this).remove(); }); } }); </code></pre> <p>CSS for popup:</p> <pre><code>.logo_zoom { display: none; position: absolute; bottom: 46px; height: 119px; width: 136px; padding: 26px 18px 31px; z-index: 3; text-align: center; line-height: 1.23em; text-decoration: none; background: transparent url('/i/bg_zoom.png') no-repeat 0 0; color: #e3e5c3; img { width: 116px; max-height: 75px; padding-bottom: 7px; } &amp;.zoom_hovered { display: block; } </code></pre> <p>And if it matters it looks like this: <a href="http://i17.photobucket.com/albums/b97/fiona_adam/Untitled-1-2.png" rel="nofollow">http://i17.photobucket.com/albums/b97/fiona_adam/Untitled-1-2.png</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload