首页 新闻 搜索 专区 学院

jquery的mouseover和mouseout

0
悬赏园豆:30 [已关闭问题] 关闭于 2010-09-09 08:06

我想实现的效果是,当鼠标悬停在mydiv上时edit显示,鼠标离开mydiv时edit隐藏,现在当鼠标放在mydiv时鼠标只要在edit内部移动,edit就不停的闪动,这是为什么呢,任何帮助将不胜感激,代码如下:

html:

<div id="mydiv" style="width:300px;height:200px;border:solid 10px red;margin-left:100px;margin-top:100px;"> 
  </div>
   <div id="edit" style="width:180px;height:200px;border:solid 5px blue;position:absolute;display:none;"> 
   </div>

script:

     $(function ()
    {
        $("#mydiv").mouseover(function (e)
        {
            var o = $(this).offset()
            $("#edit").css({ "left": (o.left-5) + "px", "top": (o.top-5) + "px" });
            var w = $(this).outerWidth(false);
            var h = $(this).outerHeight(false); 
            $("#edit").css({ width: w+ "px", height: h + "px", border: "solid 5px blue", display: "block" });
        })
        $("#mydiv").mouseout(function (e)
        {
            if ($("#edit").css("display") != "none")
            {
                $("#edit").css("display", "none");
            }
        })
    });

tenghai的主页 tenghai | 初学一级 | 园豆:175
提问于:2010-09-07 20:25
< >
分享
所有回答(2)
0

<div id="mydiv" style="display: block">显示</div>
<div id="edit" style="display:none;">隐藏</div>
注意edit的position:absolute属性。

var over = function(){

$("#edit").show();
}

 

var out = function(){

$("#edit").hide();
}

$("#mydiv").hover(over, out);

 

给个建议:处理JS时,先不用复杂CSS。

Ropean | 园豆:121 (初学一级) | 2010-09-07 22:26
当鼠标悬停在mydiv上时eidt叠加在mydiv上并显示,代码里很清楚啊,感谢您的帮助
支持(0) 反对(0) tenghai | 园豆:175 (初学一级) | 2010-09-08 08:27
那你可换种思路。 当鼠标放上来时,直接把Edit内的HTML提取出来,覆盖myDiv。 当然,要用变量把mydiv的内容保存下来。 当鼠标移走,再恢复原HTML,这样就不用考虑位移的问题了,看你写的,多少代码啊! var mydivHtml = null; var over = function(){ mydivHtml = $("#mydiv").html(); $("#mydivHtml").html($("#edit").html()); } var out = function(){ $("#mydiv").html(mydivHtml); } $("#mydiv").hover(over, out);
支持(0) 反对(0) Ropean | 园豆:121 (初学一级) | 2010-09-08 08:34
这位仁兄,是div叠加,不是替换div内容
支持(0) 反对(0) tenghai | 园豆:175 (初学一级) | 2010-09-08 09:26
小弟。 效果一样就行了,你不觉得你太死脑筋么!
支持(0) 反对(0) Ropean | 园豆:121 (初学一级) | 2010-09-08 10:10
div叠加和div内容替换的效果一样??无语
支持(0) 反对(0) tenghai | 园豆:175 (初学一级) | 2010-09-08 10:55
1

var isShow=false;

$(function ()
    {
        $("#mydiv").mouseover(function (e)
        {

  if(!isShow){
              var o = $(this).offset()
              $("#edit").css({ "left": (o.left-5) + "px", "top": (o.top-5) + "px" });
              var w = $(this).outerWidth(false);
              var h = $(this).outerHeight(false); 
              $("#edit").css({ width: w+ "px", height: h + "px", border: "solid 5px blue", display: "block" });

      isShow=true;

     }

        })
        $("#mydiv").mouseout(function (e)
        {
                $("#edit").css("display", "none");

      isShow=false;
        })
    });

切忌浮躁 | 园豆:235 (菜鸟二级) | 2010-09-08 01:30
不知道这位仁兄自己测过没有,效果还是一样,鼠标只要在edit内部移动,edit就不停的闪动,还是很感谢您的帮助
支持(0) 反对(0) tenghai | 园豆:175 (初学一级) | 2010-09-08 08:28
把 $("#edit").css({ "left": (o.left-5) + "px", "top": (o.top-5) + "px" }); 改成 $("#edit").css({ "left": (o.left-5) + "px", "top": (o.top+20) + "px" }); 就行了
支持(0) 反对(0) 峰顶顶 | 园豆:200 (初学一级) | 2010-09-10 11:46
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册