JQuery brooks 伪类：执行脚本后悬停

Question

我在使用 JQuery 时遇到了一些麻烦。网站上有 li 标签，它具有以下样式：

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

当有人试图点击这个元素时，它的颜色变为静态，代码如下：

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

然后第二次点击就变成了这样：

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

问题是在该操作之后，伪 class li:hover 停止工作，当光标悬停在元素上时，元素不会改变它的颜色...

Google 无法提出任何解决方案，所以我希望 Whosebug 知道 :)

这里是HTML代码：

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

和所有 JQuery 代码：

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

使用 jQuery 的 .css() 方法应该是执行任何操作的最后手段。相反，您应该通过类:

更改元素的外观

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

JQuery brooks 伪类：执行脚本后悬停

JQuery brokes pseudoclass :hover after executing script

html

javascript

css

jquery

pseudo-class