JQuery brokes pseudoclass :hover after executing script

Question

I got little trouble with JQuery. There is li tag on site and it have this styles:

li { margin: 0; padding: 0; clear: both;}
li:hover {background-color: #FFFFFF; margin: 0; padding: 0; clear: both;}

When somebody tried to click on this element it's color become static, here is the code:

$('.li-element-class').css('background-color','#FFFFFF');

Then on second click it's become like this:

$('.li-element-class').css('background-color','inherit'); // also tried 'none' and 'transparent'

Problem is that after that actions, pseudo class li:hover stops working, element doesn't change it's color when cursor over it...

Google can't suggest any solution, so I hope StackOverflow knows :)

Here is HTML code:

<li id="categoryButton22"><span class="menuico"></span><div style="width:70%;display:inline-block;"><a class="showMenuCover" category="22" parentcategory="1" style="color: rgb(0, 0, 0);">Садовая столовая мебель</a></div><div id="subCategoryGlyph22" style="display:none; padding-right:3px; float:right;"><span class="glyphicon glyphicon-menu-right"></span></div></li>

And all JQuery code:

$(document).ready(function(){

    /*
        Ця змінна потрібна для перевірки, щоб гарно перевідкривати панель,
        коли користувач переходить на ыншу категорыю при выдкритій панелі.
    */
    var previousCategoryClicked = '';
    var previousGlyphArrow = '';
    var previousCategoryButton = '';

    /*
        Функція, яка керує панелькою меню та контентом в ній
     */
    $('.showMenuCover').click(function(){

        // Виносимо дані з атрибутів тегу в окремі змінні, так простіше в подальшому
        var parentCategory = $(this).attr('parentCategory');
        var parentCategoryButton = '.parentCat'+parentCategory;
        var CategoryID = $(this).attr('category');
        var glyphArrow = '#subCategoryGlyph'+CategoryID;
        var categoryButton = '#categoryButton'+CategoryID;

        // Обчислення висоти елемента li для виставлення адекватних відступів гліфові
        var buttonHeight = $(categoryButton).height();
        if(buttonHeight > 10) {
            var marginGlyph = buttonHeight / 2 - 7;
        }
        else {
            var marginGlyph = buttonHeight / 2 - 2;
        }

        /*
             Далі перевіряємо чи відкрита панель з меню.
             Якщо відкрита, то просто ховаємо її, якщо закрита то відкриваємо її і втягуємо контент через AJAX.
             Перед цим виконуємо додаткову перевірку за допомогою змінної previousCategoryClicked.
             За допомогою неї перевіряємо чи є панель відкрита, якщо користувач клікнув на іншу категорію.
         */
        if(previousCategoryClicked != CategoryID && $('.menu-cover').css('display') == 'block') {

            $('.menu-cover').fadeOut('fast');
            $(previousGlyphArrow).fadeOut('fast');
            $(previousCategoryButton).css('background-color', 'inherit');

            $('.menu-cover').fadeIn('fast');
            $(glyphArrow).fadeIn('fast');
            $(glyphArrow).css('margin-top', marginGlyph);
            $(categoryButton).css('background-color', 'white');
        }
        else {
            if ($('.menu-cover').css('display') == 'none') {
                $('.menu-cover').fadeIn();
                $(glyphArrow).fadeIn();
                $(glyphArrow).css('margin-top', marginGlyph);
                $(categoryButton).css('background-color', 'white');
            }
            else {
                $('.menu-cover').fadeOut();
                $(glyphArrow).fadeOut();
                $(categoryButton).css('background-color', 'inherit');
            }
        }

        previousCategoryClicked = CategoryID;
        previousGlyphArrow = glyphArrow;
        previousCategoryButton = categoryButton;

    });
});

Answer 1

Using jQuery's .css() method should be a last resort to perform anything. Instead you should change the way an element looks via classes:

$(document).ready(function() {
  $('li').on('click', function() {
    if ($(this).hasClass('white-background')) {
      $(this).removeClass('white-background');
    } else {
      $(this).addClass('white-background');
    }
  });
});

body {
  background-color:#ccc;
}

li {
  margin: 0;
  padding: 0;
  clear: both;
}

li:hover {
  background-color: #FFFFFF;
  margin: 0;
  padding: 0;
  clear: both;
}

.white-background {
  background-color: #FFFFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<ul>
  <li class="li-element-class">
    1
  </li>
  <li class="li-element-class">
    2
  </li>
</ul>
</body>