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中则没有效果。

怎么不用hover?

IE8~11测试没问题，请考虑jquery支持的版本

在本地测试了你的代码，在IE下确实存在问题。
IE中调试，修改代码：

$(".container").mouseover(function (e) {
    var str = e.target.className||e.target.nodeName;
});

发现e.target是img。

解决方案：给.first增加background样式，比如.first{background:#ddd;}
想知道为什么，搜索关键字“IE mouseover 穿透”

【热门文章】