IE jquery mouseenter，mouseover超奇葩问题

做了个项目，结构很简单

 

<div class="index-main" data-url="./img/index_default.jpg">
    <p class="main-bg" data-init="img"><img src="./img/index_default.jpg" alt="" /></p>
    <h1 class="index-logo">
        <a href="index.php"><img src="./img/index_logo.png" alt="RAMAD" /></a>
    </h1>
    <div class="index-cont">
        <ul>
            <li class="ramad" data-url="./img/index01.jpg">
                <strong class="tl"><a href="javascript:;"><span>RAMAD</span>&nbsp;莱蒙达<em class="line"></em></a></strong>
                <div class="cont">
                    <span class="line"></span>
                    <a href="aboutus.php" data-url="./img/index03.jpg">RAMAD介绍</a>
                    <a href="aboutus.php" data-url="./img/index02.jpg">RAMAD理念</a>
                </div>
            </li>
            <li data-url="./img/index04.jpg">
                <strong class="tl"><a href="javascript:;">品牌历史</a></strong>
                <div class="cont">
                    <span class="line"></span>
                    <a href="history.php" data-url="./img/index05.jpg">品牌历史</a>
                    <a href="customize.php" data-url="./img/index06.jpg">定制历史</a>
                </div>
            </li>
            <li data-url="./img/index07.jpg">
                <strong class="tl"><a href="javascript:;">赏&析</a></strong>
                <div class="cont">
                    <span class="line"></span>
                    <a href="idea.php" data-url="./img/index09.jpg">析&nbsp;·&nbsp;<span class="arial">STORY</span></a>
                    <a href="idea.php" data-url="./img/index08.jpg">赏&nbsp;·&nbsp;<span class="arial">ART</span></a>
                </div>
            </li>
            <li data-url="./img/index10.jpg">
                <strong class="tl"><a href="javascript:;">产品展示</a></strong>
                <div class="cont">
                    <span class="line"></span>
                    <a href="product.php" data-url="./img/index11.jpg">西服</a>
                    <a href="product.php" data-url="./img/index13.jpg">衬衫</a>
                    <a href="product.php" data-url="./img/index12.jpg">其他</a>
                </div>
            </li>
            <li data-url="./img/index16.jpg">
                <strong class="tl"><a href="javascript:;">服务体系</a></strong>
                <div class="cont">
                    <span class="line"></span>
                    <a href="idea.php" data-url="./img/index14.jpg">定制流程</a>
                    <a href="idea.php" data-url="./img/index15.jpg">核心体系</a>
                </div>
            </li>
        </ul>
    </div>
    <div class="index-foot">
        <div class="cont">
            <p class="fl">浙ICP-88880000号&nbsp;丨&nbsp;<a href="#">集团网站入口</a>&nbsp;丨&nbsp;TEL：1512634984</p>
            <p class="fr"><a href="#">中文版</a>&nbsp;丨&nbsp;<a href="#">ENGLISH</a></p>
        </div>
    </div>
</div>

$(".index-cont li").mouseenter(function() {
        alert($(this).index());
    });

 

这里的mouseenter时灵时不灵，原因是.main-bg用的绝对定位，.index-cont相对定位覆盖在上面，IE在一个绝对定位元素里面没有内容, 没有背景的时候, 鼠标覆盖不到 .........解决方法加个透明的背景就解决了