jCarouselプラグインを使用しています。jCarousel で項目にカーソルを合わせると、この項目の上にポップアップを開く必要があります。ポップアップが jCarousel の高さよりも大きいため、単純なホバーは使用できません (また、overflow hidden ではこれができません)。そこで、この非表示のポップアップ (jCarousel のアイテム内に配置されている) を複製し、本文に追加します。Opera と IE を除いて、すべてがうまく機能します。ポップアップが表示されますが、マウスを離しても消えません。jCarousel で他のアイテムをホバーしたときにのみ表示され、アイテムを 2 回ホバーしたときにのみ再び表示されます。うーん、挙動不審。誰かがそれを整理するのを手伝ってくれますか?
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