javascript - IE浏览器中,JQ的mouseover失效;
本文介绍了javascript - IE浏览器中,JQ的mouseover失效;的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
1、HTML：
<body>
<div class="container">
<img id="background" src="images/text.jpg" alt=""/>
<div class="first">
<div class="forth"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</body>2、CSS：
<style>
*{
box-sizing: border-box;
}
.container{
position:relative;
}
.container>img{
display:block;
width:100%;
height:auto;
}
.first{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.second{
position:absolute;
top:0;
left:25%;
width:25%;
height:100%;
border-left:2px solid white;
border-right:1px solid white;
transform: skew(-11deg);
}
.third{
position:absolute;
top:0;
left:50%;
width:25%;
height:100%;
border-left:1px solid white;
border-right:2px solid white;
transform: skew(-11deg);
}
.forth{
margin-left:50%;
width:50%;
height:100%;
}
</style>3、JS
<script>
$(".first").mouseover(function (e) {
var str = e.target.className||e.target.nodeName;
if (str == "first") console.log("first")
if (str == "second") console.log("second")
if (str == "third") console.log("third")
if (str == "forth") console.log("forth")
});</script>
以上代码在chrome中正常，在IE中则没有效果。
解决方案
在本地测试了你的代码，在IE下确实存在问题。
IE中调试，修改代码：
$(".container").mouseover(function (e) {
var str = e.target.className||e.target.nodeName;
});发现e.target是img。
解决方案：给.first增加background样式，比如.first{background:#ddd;}
想知道为什么，搜索关键字IE mouseover 穿透
这篇关于javascript - IE浏览器中,JQ的mouseover失效;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
