本文介绍了活动(选择),悬停和非活动选项卡/ div css逻辑的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经坚持了一段时间了。我没有代码在这里显示。我想使用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>
- 选择时(活动元素) - 以蓝色突出显示
- hoverout(mouseout)上选中的元素 - 应保持蓝色 鼠标悬停时悬停 - 以颜色水色突出显示
- 未选中/ mouseout-彩色白色
- When selected (the active element) - is highlighted with the color blue
- When hovered - highlighted with color aqua
- unselected/mouseout - colored white
- selected element on hoverout (mouseout) - should retain color blue
我希望我能明白我的需要。
I hope I am clear with my need. Any help is appreciated.
推荐答案
我认为这个演示:将帮助你解决你的问题,
请通过它,让我知道。
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逻辑的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!