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在一个绝对定位元素里面没有内容, 没有背景的时候, 鼠标覆盖不到 .........解决方法加个透明的背景就解决了