CSS-Selektor: schweben

Question

Ich habe so css:

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

Wie kann ich es für den Einsatz ändern: einmal schweben?

Answer 1

Wenn Sie mehrere Hover-Ziele haben, müssen Sie der Klasse den Hook-Schalter:: hinzufügen.

.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

Sie können es erreichen JS mit hover() Funktion alle Tasten auf einmal zielen.

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