Question

<script>
            $(document).ready(function(){
            $("#dicks1").click(
                function(){
                $("header ul li").css("color", "#fff");
                $("#dicks1").css("color", "#ce0000");
            });
            $("#dicks2").click(
                function(){
                $("header ul li").css("color", "#fff");
                $("#dicks2").css("color", "#ce0000");
            });
            $("#dicks3").click(
                function(){
                $("header ul li").css("color", "#fff");
                $("#dicks3").css("color", "#ce0000");
            });

            });
            </script>

I am trying to make it so when I click an “li” it turns red and stays red unless another one is clicked, but the :hover on the li gets removed and it stays white instead of turning #111.

I tried another script with .hover and I tried an if statement but they both failed. Is there something I am missing here?

here is the page: http://web-owl.com/cockslam/

Answer 1

You could add an !important declaration next to your hover rule:

li:hover{
    color:#111 !important;
}

That way it isn’t overridden by the inline styles added by .css