Jquery 鼠标悬停在 div slideUp 上,鼠标移出 div slideDown

标签 jquery html slideup slidedown

这是我的代码 http://jsfiddle.net/AB6J3/7/ 可以查看、编辑等

当我滚动到红色边框框时,橙色框应该向上滑动,在鼠标移开时它应该向下滑动。它适用于另一种方式,但是当我将 slideDown 更改为 slideUp 时,它不起作用:/我错过了什么?

感谢帮助。

<!DOCTYPE html>
<html>
<head>
  <style>
div#monster { background:#de9a44; margin:3px; width:80px; height:40px; display:none; float:left; position:absolute; right:10px; top:0; }

#clickk {width:40px; height:40px; background:#ccc; position:absolute; top:0; right:10px;}
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<div style="width:550px; padding:40px 0 0;margin:0 auto; border:1px solid #111; position:relative;">    
    <div id="monster"></div>
    <div id="clickk"></div><br />
    <div style="width:500px; height:300px; background-color:#ccc; margin:0 auto;"></div>
</div>

<script>
$("#clickk").hover(function () {
    if ($("#monster").is(":hidden")) {
        $("#monster").slideDown("fast");
    } else {
        $("#monster").slideUp("fast");
    }
});

</script>

</body>
</html>​

最佳答案

我认为你最好在此处进行一些 CSS 调整,如下所示:

#monster { 
    background:#de9a44;
    width:80px; 
    height:60px; 
    display:none; 
    position:absolute;
    left: 0;
    bottom: 0;
}

#clickk {
    width:80px; 
    height:60px; 
    border:1px solid #cc0001; 
    background:transparent; 
    position:absolute; 
    top:0; 
    right:10px;
}

然后像这样的 jQuery:

$("#clickk").hover(function () {
  $("#monster").slideToggle("fast");
});​

You can test it out here .

关于Jquery 鼠标悬停在 div slideUp 上,鼠标移出 div slideDown,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3654829/

相关文章:

javascript - 当 iframe 在 jQuery 中完成加载时,如何触发事件?

javascript - 触摸设备上的 CSS li 下拉列表

html - 如何阻止 IE 创建像素化按钮?

javascript - 使用 angularjs 将数据添加到 json-ld

JQuery 切换内容

javascript - 如何使用 jquery 脚本使向上滑动默认打开?

javascript - 从数组中仅获取 1 个具有 2 个相似对象的对象

javascript - Bootstrap JS 在 Rails 4 中不起作用

html - 在具有淡入效果的水平导航栏上创建 CSS3 下拉菜单

jquery - HoverOut 上的 SlideDown 和 SlideUp(快速篮)