Question

请教一个问题，关于jquery判断鼠标移动到当前div和离开div的

<div id="a1" style="width:100px;height:100px;background:#000;">
<div id="a2" style="width:100px;height:40px;margin-top:30px;"></div>
</div>
我想要的效果是当鼠标移动到a1上时 a1变30%透明
离开a1时 a1变回不透明
为什么在jquery判断鼠标经过的时候在经过a2的边框时 会判断鼠标离开了a1呢

如何能在经过a2边框时，不判断鼠标离开a1呢？

Answer 1

jquery中有2个对应的事件,那就是mouseover与mouseout。mouseover就是移动到元素触发的事件,mouseout就是离开元素触发事件。
示例：
当鼠标从元素上移开时，改变元素的背景色：

jQuery 代码:
$("div").mouseout(function(){
$("div").css("background-color","#E9E9E4");
});

$("div").mouseover(function(){
$("div").css("background-color","yellow");
});

Answer 2

如div的 id 为 oDiv
jquery用 mouseover 事件判断鼠标移入,
用 mouseout 判断鼠标移出

鼠标移入:
$("#oDiv").mouseover(function(){
//此处写鼠标移入处理程序,如:
alert("鼠标移入");

});

鼠标移出:
$("#oDiv").mouseout(function(){
//此处写鼠标移出处理程序,如:
alert("鼠标移出");

});

如楼主所想移入 div id=“a1”变透明度 30%， 移出恢复，可写为
<script>
$(function(){
//鼠标移入:
$("#a1").mouseover(function(){
//此处写鼠标移入处理程序,如:
// alert("鼠标移入");
$("#a1").css({opacity：0.3}); //设置透明度30%，即0.3
});

//鼠标移出:
$("#a1").mouseout(function(){
//此处写鼠标移出处理程序,如:
//alert("鼠标移出");
$("#a1").css({opacity：1}); //恢复不透明
});
})
</script>

Answer 3

事件用的不对

jquery对这类事件情况做了封装
用 mouseleave 试试

追问

之前用的是mouseover 和mouseout，用了mouseenter和mouseleaver也不行

追答

把你的效果 代码 弄上来把看看 一般这种情况mouseleave就可以了
我刚试了下 一点问题都没有 你看看 这代码
sdfsdfsdfd
dfsdfsdfsd

(function(){
$('#av1').mouseleave(function(){
alert("出去了");
});
$('#av1').mouseenter(function(){
alert("进来了");
});
})();

我明白你要做的效果了 就是鼠标放上去 颜色加深 其他地方变浅 是吧

追问

比如你写的这个 如果里面的av2 的框架大小小于av1 经过av2边框时会发生一次鼠标离开事件···

追答

不会啊 你看在给你发个代码
sdfsdfsdfd
dfsdfsdfsd

这里 av2 比 av1小了很多 鼠标进过av2的边框时没有出发鼠标离开事件 你自己试试

(function(){
$('#av1').mouseleave(function(){
alert("出去了");
});
$('#av1').mouseenter(function(){
alert("进来了");
});
})();

用mouseover 和mouseout组合 会出现你说的那种情况
mouseenter和mouseleaver这套组合 是没问题的

如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。都改成用mouseleaver绑鼠标离开事件 不要在用mouseout

追问

我把代码给你，你看下，151。392。0498 扣号

Answer 4

$("#div").hover{
function(){}

});

通过对目标div的hover属性来判断，里面的功能就是只有在当前div的时候，才起作用，否则不激活。

Answer 5

<script type="text/javascript">
$(function(){
$("#a1").hover(function(){
设置透明 }),function(){
设置不透明（具体属性忘了，不好意思）
})
})
</script>