IE - Jquery hover() 仅第一次工作答案

【问题标题】：IE - Jquery hover() works only first timeIE - Jquery hover() 仅第一次工作
【发布时间】：2013-05-07 07:53:37
【问题描述】：

我有一个带有 hover() 函数的内联 div。

它在 FF、Chrome 中运行良好。

问题出在 IE 上，第一次它工作，第二次我检查了 div 什么都没有。

HTML：

<div id="mini-cart-li" class="">
    <a class="heading" href="http://mb.local.com/checkout/cart/" title="View contents of your shopping cart">My Cart
    </a>
    <div id="mini-cart-content" class="block block-cart block-content" style="display: none;">
        BLA BLA BLA BLA BLA ....
        </div>
        </div>

JS：

    jQuery(document).ready(function () {

    jQuery("#mini-cart-li").hover(
        function () {
          //  jQuery(this).addClass('hover');
            jQuery("#mini-cart-content").stop(true, true).animate({opacity: "show", display: "block"}, "slow");
        },
        function () {
         //   jQuery(this).removeClass('hover');
            jQuery("#mini-cart-content").stop(true, true).animate({opacity: "hide", display: "none"}, "slow");
        }
    )
});

【问题讨论】：

您在最后一个 }); 之前缺少 ;。 Link

标签： jquery internet-explorer hover

【解决方案1】：

尝试使用数字而不是show 和hide 来表示不透明度值：

jQuery("#mini-cart-li").hover(
    function () {
      //  jQuery(this).addClass('hover');
        jQuery("#mini-cart-content").stop(true, true).animate({opacity: 1, display: "block"}, "slow");
    },
    function () {
     //   jQuery(this).removeClass('hover');
        jQuery("#mini-cart-content").stop(true, true).animate({opacity: 0, display: "none"}, "slow");
    }
)

【讨论】：

【解决方案2】：

试试这个

    $('#mini-cart-content').stop(true, true).animate({ opacity: "show" }, "slow");

     $("#mini-cart-content").stop(true, true).animate({ opacity: "hide" }, "slow");

【讨论】：

这很好用，所以问题主要出在 animate() 而不是 hover()