.addClass() не похоже на работу

На мой первый проект когда-либо, я пытаюсь объединить .hover с .addClass() выделить DIV под курсором мыши..addClass() не похоже на работу

Она должна быть достаточно простой, но я не могу заставить его работать, вот что я писал до сих пор:

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>

Попытка выяснить, что я напутал, я включил «.addclass (« active »)» с «.hide()», и это привело к тому, что Div исчез.

источник

2016-01-23 Gonzaga78

Он действительно добавляет класс при зависании. Проблема в том, что селектор #NewItem более специфичен, чем селектор .active, что означает, что цвет фона, добавленный с помощью селектора .active, переопределяется.

specificity из #NewItem - 0, 1, 0, 0; в то время как специфика .active составляет 0, 0, 1, 0.

Увеличение specificity селектора .active, и читать больше о specificity here.

Example Here

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

В качестве примечания, если вы предназначены для переключения класса на MouseEnter и отведении указателя мыши, использовать, вероятно, хотите использовать .toggleClass() метод вместо:

Updated Example

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

или просто полностью избегайте jQuery и используйте :hover псевдо-класс (если это работает в вашем случае):

Updated Example

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

источник

2016-01-23 23:24:05

Даже если class добавляется, вы не получите желаемого результата. Причина - специфика CSS. Поэтому изменить его таким образом:

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

#id занимает больше приоритет над селектором .class. Так что обе они будут работать.

Для more information, использовать это в качестве ссылки:

источник

2016-01-23 23:24:45

-1

Фоновый цвет вашего NewItem ID переопределяет цвет фона класса активного, из-за специфики CSS. См. Новый рабочий пример ниже.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

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

источник

2016-01-23 23:27:23

.addClass() не похоже на работу

ответ

Смежные вопросы