活动（选择），悬停和非活动选项卡/ div css逻辑 [英] active(selected), hover and inactive tab/div css logic

问题描述

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

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>

1. 选择时（活动元素） - 以蓝色突出显示


2. hoverout（mouseout）上选中的元素 - 应保持蓝色
鼠标悬停时悬停 - 以颜色水色突出显示

3. 未选中/ mouseout-彩色白色

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.

推荐答案

我认为这个演示： http://jsfiddle.net/sahilosheal/caB3a/1/ 将帮助你解决你的问题，
请通过它，让我知道。
HTML5：

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

<div class="tab bat">select1</div>
<div class="tab bat">select2</div>
<div class="tab bat">select3</div>

CSS：

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;
}

JQUERY：

$('.tab').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
});

这篇关于活动（选择），悬停和非活动选项卡/ div css逻辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！