Question

Jquery代码：

<script type="text/javascript">
$(document).ready(function() {
$("#imgcart").mouseover(function() {
if ($("#sidebar").is(":hidden")) {
$("#sidebar").slideDown('slow');
} else {
$("#sidebar").hide();
}
});
});
</script>

HTML code：

<div id="wrapper">
<img src="images/cart.jpg" width="80px" height="30px" id="imgcart">
<div id="sidebar">
</div></div>

这是我的jquery和html代码。我不能让它工作。我觉得我的代码中缺少一些东西。请你指导我。这将是非常好的...谢谢大家。

Answer 1

Your code仅在鼠标进入图像时更改显示状态，鼠标离开元素时mouseover不会触发。

您可能正在寻找的是hover（）

$(document).ready(function () {
    $("#imgcart").hover(function () {
        $("#sidebar").stop(true).slideDown('slow');
    }, function () {
        $("#sidebar").stop(true).hide();
    });
});

演示：Fiddle

Answer 2

目前，您只处理mouseover事件，当您 mouseout 图片时，您需要处理此案例：

$(document).ready(function () {
    $('#sidebar').hide();
    $("#imgcart").mouseover(function () {
        $("#sidebar").slideDown('slow');
    });

    $("#imgcart").mouseout(function () {
        $("#sidebar").hide();
    });
});

<强> Fiddle Demo

或者您可以使用 .hover() 绑定两个处理程序，并在鼠标指针进入并离开您的图像时执行：

$(document).ready(function () {
    $('#sidebar').hide();
    $("#imgcart").hover(function () {
        $("#sidebar").slideDown('slow');
    }, function () {
        $("#sidebar").hide();
    });
});

<强> Fiddle Demo

jquery中的幻灯片效果不起作用

2 个答案: