Question

The .addClass is not working for me in Firefox, it only works if I take off the background:#f2f2f2; from the CSS style block or class="hovering” out of the <tr> tag.
Otherwise this works in all browsers, Chrome, IE and 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>

Is this possibly a bug?

Answer 1

Don’t know why yours does not work but I changed the hover to a jQuery call and removed the style for the css hover.

Very weird problem. +1 Loved it!

<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>