CSSクラスを使用して背景色を切り替える

Question

デフォルトでは背景色が「lightGreen」に設定されています。また、ホバリング時にbackground-colorを「赤」に上書きするクラスを追加しています。

クラスが追加されると、それは赤を適用しないで、lightGreenに固執します。

この要素にはデフォルトで「無効」クラスがありますが、この例では「uiHighlight」を追加する前に.removeClass（ "disabled"）を実行するコードがあります。

私が意図したとおりに機能しないのはなぜですか？そうでない理由がある -

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

とidセレクタがclassセレクタよりも多くの特異性を有するこの

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

Answer 1

：

私はこれを持っています作業。試してみてください：

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

乾杯！

$("#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をチェックしてください。