0

我与使用 JQuery 的 .animation 的方式发生冲突。

我有一个包含 showthis() 和 hidethis() 函数的图像：

function hidethis() {
    $('#info1').animate({
        bottom: '-150px',
    }, 100);
}
function showthis() {
    $('#info1').animate({
        bottom: '0px',
    }, 500);
}

我拥有的元素是放置在页面上的图像和 div 位置：固定；在图像上作为显示/隐藏信息选项卡。

以下是每个元素的样式：

.slide img {
    position: absolute;
    top: 0px;
    left: 0px;
}
.info {
    position: fixed;
    bottom: -150px;
    left: 0px;
    width: 527px;
    height: 100px;
    background-color: white;
    padding: 15px;
    opacity:0.9;
}

并且 JQuery 是由图像中的鼠标事件触发的：
onmouseover="javascript:showthis();" onmouseout="javascript:hidethis();"

冲突：

浮动在图像上方的 div（每次访问者将鼠标悬停在图像上时都会显示）与图像上的 onmouseout 冲突。如果将鼠标悬停在图像上，则会显示 div。但是，如果您将鼠标悬停在 div 上同时仍将鼠标悬停在图像上，则 div 会隐藏并且它会“混淆”并开始多次进出，而我仍在将鼠标移动到 div 即将出现的图像上方。我怎样才能防止这种情况发生？

4

1 回答 1

0

您不应该在图像上使用事件处理程序，而是在包含元素上使用，以避免鼠标离开图像并进入.info元素时出现问题，如下所示：

HTML

<div class="slide">
    <img src="someimgage.png" />
    <div class="info">Some info</div>
</div>

JS

$('.slide').on({
    mouseenter: showthis,
    mouseleave: hidethis
});

另外，您#info1在函数中使用，但.info在 CSS 中，它是什么？

小提琴

于 2013-07-09T00:23:44.040 回答