CODEWITHSUNDEEP
javascriptjquerycss
alh
alh

Reputation: 2599

Why is my hover css being removed by jQuery?

I was wanting to have an on hover feature in combination with a currently selected item feature for navigation. The hover feature is there when the page first loads; however, after selecting an item (and running the script), the hover css seems to have been removed and I'm not sure why. Here is my file (jsfiddle):

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <link rel="shortcut icon" href="/favicon.ico">
      <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
      <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
      <title>TITLE</title>
      <style>
         ul {
            list-style: none;
         }

         li {
            background-color: orange;
            color: white;
            float: left;
            padding: 10px;
         }

         li:hover {
            background-color: grey;
            color: black;
         }
      </style>
   </head>
   <body>
      <ul>
         <li>one</li>
         <li>two</li>
         <li>three</li>
         <li>four</li>
         <li>five</li>
      </ul>

      <script type="text/javascript">
         $("li").click(function() {
            $("li").each(function() {
               $(this).css({'background-color' : 'orange',      
                            'color' : 'white'});      
            });
            setHighlighted(this);
         });

         var setHighlighted = function(ref) {
            $(ref).css({'background-color' : 'grey',
                        'color' : 'black'
            });
         }
</script>
   </body>
</html>

Upvotes: 3

Views: 220

Answers (5)

adjogima
adjogima

Reputation: 169

I think this is much simpler :

li {
    padding: 10px;
    float: left;
    background-color: orange;
    color: white;
}

li:hover,
li.on {
    background-color: gray;
    color: black;
}

Plus, it leaves styling to CSS only :

$('ul').on('click', 'li', function(ev) {
    $(ev.delegateTarget).find('.on').removeClass('on');
    $(this).addClass('on');
});

See this fiddle : jsfiddle.net/rG4a5/

Upvotes: 0

EdenSource
EdenSource

Reputation: 3387

Best way to do, and lighter :

$("li").each(function () {
    $(this).click(function () {
       //Your function
    });
});

Now, to set an "active" statment, you should add a class :

.markup{ 
    background-color: grey;
    color: black;  
}

And set this class to the right LI after removing the existing active LI :

$("li").each(function () {
    $(this).click(function () {
        $(".markup").removeClass("markup")
        $(this).addClass("markup");
    });
});

Have a look at this fiddle

Upvotes: 0

Arun Bertil
Arun Bertil

Reputation: 4638

Check the JS fiddle

http://jsfiddle.net/BxPW3/4/

$("li").click(function() {
               /* $("li").each(function() {*/
                    $(this).css({
                        'background-color': 'orange',
                            'color': 'white'
                    });
              /*  });*/
                setHighlighted(this);
            });

            var setHighlighted = function(ref) {
                $(ref).css({
                    'background-color': 'grey',
                        'color': 'black'
                });
            }

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Just add !important on li:hover selector for background-color.

li:hover {
            background-color: grey !important;
            color: black;
         }

demo

Upvotes: 0

DGS
DGS

Reputation: 6025

Because you are assigning the style property of the li's with jQuery

$("li").each(function () {
    $(this).css({
        'background-color': 'orange',
            'color': 'white'
    });
});

This writes to the style tag of the element which supersedes the 

 li:hover {
     background-color: grey;
     color: black;
 }

style

change your code to

$("li").click(function () {
    $("li").each(function () {
        $(this).css({
            'background-color': '',
                'color': ''
        });
    });
    setHighlighted(this);
});

JSFIDDLE

This will remove the background-color and color from the style property of the li elements which will make the li:hover the style that takes precedence

Upvotes: 4

Related Questions