jquery - 事件(选中)、悬停和非事件选项卡/div css 逻辑

Question

我已经坚持了一段时间了。我这里没有要显示的代码。我想要一个使用 jquery/css 的算法/伪代码:

一个选项卡/<div>那:

1. 选中时(事件元素)- 以蓝色突出显示
2. 悬停时 - 用浅绿色突出显示
3. 未选中/鼠标悬停 - 颜色为白色
4. hoverout(鼠标移出)时选定的元素 - 应保留蓝色

我希望我清楚自己的需求。感谢您的帮助。

Answer 1

我认为这个演示:http://jsfiddle.net/sahilosheal/caB3a/1/将帮助您解决问题， 请仔细阅读并告诉我。

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