Question

此代码适用于Chrome和IE，但在Firefox中无效！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

JS：

   $(window).load(function(){
    $("#bostitchTitle_Printable_1, #bostitchTitle_Printable_2").hover(function () {
        $(this).toggleClass("hoverblueL");
      });
    $(".printableTitle").hover(function () {
        $(this).toggleClass("hoverblue");
      });
    });

CSS：

.hoverblue { 
    background:url('images/border-bottom.png') !important;
    height:20px;
}
.hoverblueL { 
    background:url('images/border-bottom.png') !important;
    height:36px;
}

HTML：

上面的所有相关IDS如下所示（但是带有元素名称，即_1和_2）。注意类.printableTitle在<span>标签中共享，但我需要定义另外两个唯一的DIVS，因为它们需要不同的高度处理。

<li id="bostitchPrintable_1">
        <a href="http://www.canada.org" target="_blank">
            <span id="bostitchTitle_Printable_1" class="printableTitle bos_title shimify">Rollin to Canada tonight!!</span>
        </a>
    </li>

IE和Chrome完美......对于Firefox来说根本没有任何结果!!

Answer 1

$(window).load在Firefox中不起作用，这是不好的做法。您应该使用$(document).load。

另外，如果您的jQuery版本允许，请使用.on而不是.hover。

$("#bostitchTitle_Printable_1, #bostitchTitle_Printable_2").on("hover", function () {
        $(this).toggleClass("hoverblueL");
      });

.hover无论如何都会调用此函数

jquery悬停函数onLoad在firefox中不起作用

1 个答案: