マウスオーバーjquery関数を持つ画像があります:
$(document).ready(function ()) {
mouseenter: function () {
$(this).children('.item_450_description').stop().fadeTo(500, 1);
},
mouseleave: function () {
$(this).children('.item_450_description').stop().fadeTo(500, 0);
}
});
マウスカーソルで画像を入力すると、説明が表示されます。説明には、画像とテキストが含まれています。
<div class="item_450_image">
<a class="item_popup" href="popup.php?id=1?>"><img src="pic.jpg" class="img_450" /></a>
<div class="item_450_description">
<p class="title">Title</p>
<p class="poster">by poster</p>
<div class="item_poster">
<img src="user.jpg" class="img_poster" />
</div>
</div>
</div>
カーソルを置いたまま画像を離れると、説明が消えます。これは、IE9、Chrome、Safari、および Firefox で正常に動作しています。しかし、IE8で試してみると、問題が発生しました。
カーソルで画像を入力すると、説明が表示されます(画像とテキストを含む)。しかし、カーソルで画像を離れると、説明とテキストが消えます。しかし、説明の画像は立ったままで消えません。
どうすればこの問題を解決できますか?
(追加CSS)
.item_450_image {
text - align: left;
position: relative;
width: 450px;
border - top: 1px solid#cdcdcd; - webkit - border - radius: 5px; - moz - border - radius: 5px;
border - radius: 5px;
margin - left: 5px;
padding: 4px 4px 2px 4px;
background - color: #efefef;
box - shadow: 0 1px 3px rgba(0, 0, 0, 0.5); - moz - box - shadow: 0 1px 3px rgba(0, 0, 0, 0.5); - webkit - box - shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.img_450 {
width: 450px;
}
.item_450_description {
position: absolute;
bottom: 5px;
left: 4px;
width: 450px;
display: none;
background: url('../img/items/bg_description.png');
padding: 5px 0px 5px 0px;
}