在IE8中鼠标悬停后,图像一直显示

时间:2012-06-21 11:56:49

标签: jquery css internet-explorer-8 mouseenter mouseleave

我有一个具有mouseover 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;
}

1 个答案:

答案 0 :(得分:0)

添加z-index:-1; (或减去某些东西)鼠标离开时的图像属性,当鼠标再次进入时将其更改为0(或一些大数字)。