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>