Mouseleave в jCarousel не работает в Opera и IE
Я использую плагин jCarousel. При наведении курсора на элемент в jCarousel мне нужно открыть всплывающее окно над этим элементом. Я не могу использовать простое наведение, потому что всплывающее окно больше, чем высота jCarousel (и скрытый переполнение не позволяет мне сделать это). Поэтому я клонирую это скрытое всплывающее окно (которое находится внутри элемента jCarousel) и добавляю его в тело. Все прекрасно работает, ожидайте в Opera и IE. Появляется всплывающее окно, но оно не уходит при отпускании мыши. Он уходит только тогда, когда я наведу на него другой элемент в jCarousel, и снова появляется только тогда, когда я дважды наведу на него курсор. Ну странное поведение. Может кто-нибудь помочь мне разобраться?
HTML:
<ul id="logo_scroll" class="jcarousel-skin-tango">
<li>
<a href="">
<img src="/i/delete/logo_1.png" width="111" height="58" alt="" />
<span>Description 1</span>
</a>
<a href="" class="logo_zoom">
<img src="/i/delete/logo_2_zoom.png" alt="">
<span>Description 1</span>
</a>
</li>
<li>
<a href="">
<img src="/i/delete/logo_2.png" width="111" height="58" alt="" />
<span>Description 2</span>
</a>
<a href="" class="logo_zoom">
<img src="/i/delete/logo_2_zoom.png" alt="">
<span>Description 2</span>
</a>
</li>
<li>
<a href="">
<img src="/i/delete/logo_3.png" width="111" height="58" alt="" />
<span>Description 3</span>
</a>
<a href="" class="logo_zoom">
<img src="/i/delete/logo_2_zoom.png" alt="">
<span>Description 3</span>
</a>
</li>
</ul>
JQuery:
$('.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 > 1) {
$('.zoom_hovered').remove();
}
else {
$('.zoom_hovered').mouseenter(function(){
$('body').append(logo_zoom);
});
$('.zoom_hovered').mouseleave(function(){
$(this).remove();
});
}
});
CSS для всплывающих окон:
.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;
}
&.zoom_hovered {
display: block;
}
И если это имеет значение, это выглядит так: http://i17.photobucket.com/albums/b97/fiona_adam/Untitled-1-2.png