Question

我与使用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由图像中的onmouse事件触发：
onmouseover="javascript:showthis();" onmouseout="javascript:hidethis();"

冲突：

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

Answer 1

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

HTML

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

JS

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

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

FIDDLE

用jQuery动画盘旋div和图像问题

冲突：

1 个答案: