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");
}
})
});
所有回答(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。
当鼠标悬停在mydiv上时eidt叠加在mydiv上并显示，代码里很清楚啊，感谢您的帮助
那你可换种思路。
当鼠标放上来时，直接把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);
这位仁兄，是div叠加，不是替换div内容
小弟。
效果一样就行了，你不觉得你太死脑筋么！
div叠加和div内容替换的效果一样？？无语
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;
})
});
不知道这位仁兄自己测过没有，效果还是一样，鼠标只要在edit内部移动，edit就不停的闪动，还是很感谢您的帮助
把 $("#edit").css({ "left": (o.left-5) + "px", "top": (o.top-5) + "px" });
改成 $("#edit").css({ "left": (o.left-5) + "px", "top": (o.top+20) + "px" });
就行了
