87,915
社区成员
发帖
与我相关
我的任务
分享mouseleave和mouseenter在一个div内多次触发
一个简单的IE下的页面，实现div鼠标在里面的时候加背景色，离开时去掉背景色。
但是现在鼠标在div内移动是会多次触发mouseenter和mouseleave，界面不断加背景去背景造成闪烁
<html>
<head>
<style type="text/css">
.gradient{
width:100%;
filter:progid:DXImageTransform.microsoft.gradient(enabled=true,gradienttype=1,startColorStr=blue,endColorStr=skyblue);
}
</style>
<script type="text/javascript">
function addClass(handler,event,c){
if(handler.className.indexOf(c) == -1)
{
handler.className = handler.className + " " + c;
}
}
function removeClass(handler,event,c){
handler.className = handler.className.replace(" " + c,"");
}
</script>
</head>
<body>
<div id="textDiv" onmouseenter="addClass(this,event,'gradient')" onmouseleave="removeClass(this,event,'gradient')">
<span style="float:right">title</span>
<span>so Cool</span>
<p style="clear:both">content</p>
</div>
</body>
</html>
但是现在鼠标在div内移动是会多次触发mouseenter和mouseleave，界面不断加背景去背景造成闪烁
<html>
<head>
<style type="text/css">
.gradient{
width:100%;
filter:progid:DXImageTransform.microsoft.gradient(enabled=true,gradienttype=1,startColorStr=blue,endColorStr=skyblue);
}
</style>
<script type="text/javascript">
function addClass(handler,event,c){
if(handler.className.indexOf(c) == -1)
{
handler.className = handler.className + " " + c;
}
}
function removeClass(handler,event,c){
handler.className = handler.className.replace(" " + c,"");
}
</script>
</head>
<body>
<div id="textDiv" onmouseenter="addClass(this,event,'gradient')" onmouseleave="removeClass(this,event,'gradient')">
<span style="float:right">title</span>
<span>so Cool</span>
<p style="clear:both">content</p>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
sjkof 2010-03-29
- 打赏
- 举报
推荐使用jquery，不要用你自己写的函数了
<div id="textDiv">
<div>
<span style="float:right">title</span>
<span>so Cool</span>
<p style="clear:both">content</p>
<div>
</div>
<script>
$("#textDiv").hover(function() { $(this).children().addClass("gradient"); }, function() { $(this).children().removeClass("gradient"); });
</script>sjkof 2010-03-29
- 打赏
- 举报
是因为滤镜的关系.
解决方法是把滤镜和事件放在不同的层上面
解决方法是把滤镜和事件放在不同的层上面
shan1119 2010-03-28
- 打赏
- 举报
<div id="textDiv" onmouseenter="addClass(this,event,'gradient')" onmouseleave="removeClass(this,event,'gradient')">
<div style="width:100%;height:100%;">
<span style="float:right">title</span>
<span>so Cool</span>
<p style="clear:both">content</p>
</div>
</div>
在div里再嵌套一个div。
<div style="width:100%;height:100%;">
<span style="float:right">title</span>
<span>so Cool</span>
<p style="clear:both">content</p>
</div>
</div>
在div里再嵌套一个div。
mutoujuelian 2010-03-28
- 打赏
- 举报
查了一下。 是滤镜的问题。 应该。 没时间给你慢慢找应对方法了。 我也是新手。。
mutoujuelian 2010-03-28
- 打赏
- 举报
用onmouseover和onmouseout吧？
