Html – active(selected), hover and inactive tab/div css logic

csshtmljquery

I have been stuck with this for a while now. I have no code to show here. I would like an algorithm/pseudocode for the below using jquery/css:

A tab / <div> that:

  1. When selected (the active element) – is highlighted with the color blue
  2. When hovered – highlighted with color aqua
  3. unselected/mouseout – colored white
  4. selected element on hoverout (mouseout) – should retain color blue

I hope I am clear with my need. Any help is appreciated.

Best Solution

i think this Demo: http://jsfiddle.net/sahilosheal/caB3a/1/ will help you to solve your problem, please go through it and let me know.

$('.tab').click(function() {
  $(this).addClass('active').siblings().removeClass('active');
});
div.active {
  background-color: #2e2e2e !important;
  color: white;
  height: 25px;
  width: 100px;
  float: left;
  margin-right: 2px;
  text-align: center;
  padding-top: 5px;
}

div.bat:hover {
  background-color: #80a3bb;
  height: 25px;
  width: 100px;
  float: left;
  margin-right: 2px;
  text-align: center;
  padding-top: 5px;
}

div.bat {
  background-color: orange;
  height: 25px;
  width: 100px;
  float: left;
  margin-right: 2px;
  text-align: center;
  padding-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab bat">select1</div>
<div class="tab bat">select2</div>
<div class="tab bat">select3</div>