Question

我有这样的css：

<body style="overflow: hidden; height: 200px; ">
  <div id="appContainer" style="display: flex; flex-direction: column; background: yellow; height: 100%;">
      <div id="header" style=" background-color: red;">Header</div>
      <div id="content" style="flex:1; overflow-y: scroll;">Fill this space</div>
      <div id="footer"  style="background-color: red;">Footer</div>
  </div>
</body>

如何更改使用方法：悬停一次？

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>

Css选择器：悬停

2 个答案: