Viacheslav Zhabonos Viacheslav Zhabonos - 2 months ago 15
CSS Question

JQuery brokes pseudoclass :hover after executing script

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

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>

Comments