Question

.ddClass在Firefox中不起作用，只有当我从CSS样式块中取消background:#f2f2f2;或从class="hovering”标记中取出<tr>时，它才有效。否则，这适用于所有浏览器，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>

Jquery冲突tr：firefox中的hover和.addclass

2 个答案: