Переключение цвета фона с использованием классов css

Question

У меня есть элемент, который по умолчанию имеет цвет фона, установленный на «lightGreen», и при наведении курсора im, добавляя класс, который должен перезаписать background-color на «красный».

Когда класс добавляется (и он делает), его не применяет красный цвет, но он прилипает к светло-зеленому.

Обратите внимание, что элемент имеет класс «отключен» по умолчанию, но в этом примере у меня есть код, запущенный .removeClass («отключен») перед добавлением «uiHighlight».

Почему это не работает для меня?

У меня есть это:

#increaseImpulse, #decreaseImpulse, #undoLastAction { 
    border: 1px solid black; 
    background-color: lightGreen; 
} 

.uiHighlight { 
    background-color: red; 
} 

.disabled { 
    display: none; 
} 

и этот

  <tr id="undoLastAction" class="disabled"> 
       <td colspan=2> 
        Undo last action 
       </td> 
      </tr> 

и этот

$("#undoLastAction") 
    .hover(
     function(e){ 
      $(this).addClass("uiHighlight"); 
     }, 
     function(e){ 
      $(this).removeClass("uiHighlight"); 
     } 
    ) 
    .click(function(e){ 
     console.log("undoLastAction") 
    }); 

Answer 1

Селектор id имеет больше конкретики, чем селектор class - именно поэтому он не Работа. Попробуйте следующее:

#undoLastAction.uiHighlight { 
    background-color: red; 
} 

Cheers!

$("#undoLastAction").hover(
 
    function(e) { 
 
     $(this).addClass("uiHighlight"); 
 
    }, 
 
    function(e) { 
 
     $(this).removeClass("uiHighlight"); 
 
    } 
 
).click(function(e) { 
 
    console.log("undoLastAction") 
 
});

#increaseImpulse, 
 
#decreaseImpulse, 
 
#undoLastAction { 
 
    border: 1px solid black; 
 
    background-color: lightGreen; 
 
} 
 
#undoLastAction.uiHighlight { 
 
    background-color: red; 
 
} 
 
.disabled { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr id="undoLastAction"> 
 
    <td colspan=2> 
 
    Undo last action 
 
    </td> 
 
</tr> 
 
</table>

Answer 2

Вам не нужно JQuery - это может быть сделано в чистом CSS:

#undoLastAction { 
    background-color: green; 
} 

#undoLastAction:hover { 
    background-color: red;   
} 

Проверить эту jsFiddle.