Question

在我的第一个项目中，我尝试将 .hover 与 .addClass（）结合使用，以突出显示鼠标指针下的div。

它应该相当简单，但我不能让它工作，这是我到目前为止写的：

jQuery的：

$(document).ready(function() {
    $('#NewItem').hover(function() {        
        $('#NewItem').addClass('active');
    });
});

CSS

div {
    border-radius: 5px;
    transition: background-color 0.5s ease;
}

#NewItem {
    border: 1px solid #000000;
    background-color: #F0F8FF;
    Width: 100px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    z-index: 5;
    text-align: center;
}

.active {
    background-color:#556677;
}

HTML

<body>
    <div id="background">
         <div id="NewItem">             
            <p> Add item </p>
         </div>
    </div>
</body>

试图找出我错了什么，我换了＆＃34; .addclass（＆＃39; active＆＃39;）＆＃34;用＆＃34; .hide（）＆＃34;它确实让div消失了。

Answer 1

它确实在悬停时添加了这个类。问题是选择器#NewItem比选择器.active更具体，这意味着正在覆盖随.active选择器添加的背景颜色。

#NewItem的{{3}}为0,1,0,0;而.active的特殊性是0,0,1,0。

增加.active选择器的specificity，并详细了解specificity。

specificity here

#NewItem.active {
  background-color: #556677;
}

作为旁注， if 您打算在mouseenter和mouseout上切换类，请使用.toggleClass()方法代替：

Example Here

$('#NewItem').hover(function() {
  $(this).toggleClass('active');
});

或者完全避免使用jQuery并使用:hover伪类（如果适用于您的情况）：

Updated Example

#NewItem:hover {
  background-color: #556677;
}

Answer 2

即使添加了class，您也无法获得所需的结果。原因是CSS特异性。所以改变方式：

#NewItem.active {
  background-color: #556677;
}

#id优先于.class选择器。所以给两者都有效。

对于more information，请将此作为参考：

Answer 3

由于CSS特异性，NewItem ID的背景颜色会覆盖活动类的背景颜色。请参阅下面的新工作示例。

var count = <?php
     $tmp = json_encode($resultArray);
     echo ($tmp === false ? 'null' : $tmp);
?>;

$(document).ready(function(){

  $(".newItem").hover(function(){
      $(".newItem").toggleClass("active"); 
  });

});

div {
    border-radius: 5px;
    transition: background-color 0.5s ease;
}

.newItem {
    border: 1px solid #000000;
    background-color: #F0F8FF;
    Width: 100px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    z-index: 5;
    text-align: center;
}

.active {
    background-color:#556677;
}

.addClass（）似乎不起作用

3 个答案: