1、HTML：
<body>
<p class="container">
<img id="background" src="images/text.jpg" alt=""/>
<p class="first">
<p class="forth"></p>
<p class="second"></p>
<p class="third"></p>
</p>
</p>
</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中调试，修改代码：
发现e.target是img。
解决方案：给.first增加background样式，比如.first{background:#ddd;}
想知道为什么，搜索关键字“IE mouseover 穿透”
IE8~11测试没问题，请考虑jquery支持的版本
怎么不用hover?