Firefox 中的 Jquery 冲突 tr:hover 和 .addclass

Question

.addClass 在 Firefox 中对我不起作用，只有当我从 CSS 样式块中删除 background:#f2f2f2; 或从 <tr> 标记中删除 class="hovering” 时它才有效。 否则，这适用于所有浏览器、Chrome、IE 和 Opera。

<style>

        .addToFav div{background:url('/images/star_no.png') no-repeat scroll !important; height:25px; margin:0 auto; width:25px; z-index: 999}

        .addedToFav div{background:url('/images/star_yes.png') no-repeat scroll !important; height:25px; margin:0 auto; width:25px; cursor:default;}

        tr.hovering:hover{ background-color:#f2f2f2}

</style>


<script>
    $(document).ready(function()
        {

        $("a.addToFav").click(function(){


            $($(this).removeClass("addToFav").addClass("addedToFav"));

        }); 

    });
</script>


            <table><tr class="hovering"><td>
                <div style="float:right"><a class="addToFav" href="#">
                <div></div>
                </a>
                </div>
            </td></tr></table>

这可能是一个错误吗？

Answer 1

在addedToFav 类中，如果您要设置background-color，则将!important 添加到其中。这将确保在页面上存在其他冲突的样式规则时给予更多优先权。

Answer 2

不知道为什么你的不起作用，但我将悬停更改为 jQuery 调用并删除了 CSS 悬停的样式。

非常奇怪的问题。 +1 喜欢它！

<script>
    $(document).ready(function () {

        $("a.addToFav").click(function () {
            $(this).removeClass("addToFav");
            $(this).addClass("addedToFav");
        });

        $("tr.hovering").hover(function () { $(this).addClass("trhover"); }, function () { $(this).removeClass("trhover"); });
    });
</script>


<table><tr class="hovering"><td>
    <div style="float:right">
        <a class="addToFav" href="#"><div></div></a>
    </div>
</td></tr></table>

<style>
    .trhover{ background-color:#f2f2f2 }
    .addToFav div{background:url(http://www.localisado.com/images/star_no.png) no-repeat scroll; height:25px; margin:0 auto; width:25px; z-index: 999}
    .addedToFav div{background:url(http://www.localisado.com/images/star_yes.png) no-repeat scroll; height:25px; margin:0 auto; width:25px; cursor:default;}
</style>