Css селектор: парить

Question

У меня есть такой CSS:

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

Как я могу изменить его для использования: парить один раз?

Answer 1

Если у вас есть несколько целей наведения, вам нужно добавить селектор: hover в класс.

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