CSSセレクタ：私は、このようなCSSを持って

Question

を置く：

#addEmplButton:hover, #addButton:hover, #allEmpl:hover{ 
    background-color:#e4b9b9 ; 
} 

は、どのように私は使用するためにそれを変更することができます。一度ホバー？

Answer 1

複数のホバーターゲットがある場合は、：ホバーセレクターをクラスに追加する必要があります。

.hoverEvent:hover { 
    //CSS 
} 

.hoverMe:hover { 
 
    background-color: red !important; 
 
} 
 

 
#btn1 { 
 
    background-color: blue; 
 
} 
 
#btn2 { 
 
    background-color: green; 
 
} 
 
#btn3 { 
 
    background-color: yellow; 
 
}

<div id="btn1" class="hoverMe"> 
 
    Hey There! 
 
</div> 
 
<div id="btn2" class="hoverMe"> 
 
    Hey There! 
 
</div> 
 
<div id="btn3" class="hoverMe"> 
 
    Hey There! 
 
</div>

Answer 2

一度にすべてのボタンをターゲットにするJS hover()機能を使用してそれを達成することができます。

$(document).ready(function() { 
 
var buttonsId = "#addEmplButton,#addButton,#allEmpl"; 
 
    $(buttonsId).hover(function() { 
 
     $(buttonsId).addClass("afterHover"); 
 
    }, 
 
    function() { 
 
     $(buttonsId).removeClass("afterHover"); 
 
    }); 
 

 
});

#addEmplButton { 
 
    background-color: blue; 
 
} 
 
#addButton { 
 
    background-color: green; 
 
} 
 
#allEmpl { 
 
    background-color: yellow; 
 
} 
 
/*Hover style here*/ 
 

 
.afterHover { 
 
    background: red !important; 
 
}

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

 
<button id="addEmplButton">Add Employee</button> 
 
<button id="addButton">Add</button> 
 
<button id="allEmpl">All Employee</button>