CODEWITHSUNDEEP
css
Александр Горобец
Александр Горобец

Reputation: 113

Css selector :hover

I have such css:

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

How can I change it for use :hover once?

Upvotes: 1

Views: 79

Answers (2)

Hidayt Rahman
Hidayt Rahman

Reputation: 2678

You can achieve it using JS hover() function to target all buttons at once.

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

Upvotes: 2

DomeTune
DomeTune

Reputation: 1421

If you have multiple hover targets, you'll need to add the :hover selector to an class. 

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

Upvotes: 3

Related Questions