我目前有一组div(按钮),它们都使用css悬浮各种颜色。当按下其中一个div时,我使用jQuery使颜色永久不变,并将所有其他div的颜色恢复为默认值。
但是,似乎一旦完成,:hover颜色将不再起作用。我接近jQuery是否出错?我怎样才能解决这个问题。这是一个例子:
编辑
我正在发布jsfiddle来更好地解释。您会看到,当您第一次在div上扫描鼠标时,它们会悬停不同的颜色。而且,如果您单击div 1或div 2(其他按钮将不起作用,不要为所有小提琴都使用jQuery代码),则div会保持其颜色,而其他任何颜色都将恢复为原始颜色。但是,这将禁用CSS中的:hover伪类。我需要帮助解决此问题。
http://jsfiddle.net/P3Ckk/143/
最好的解决方案是什么?
最佳答案
工作演示:http://jsfiddle.net/P3Ckk/145/
我宁愿这样:
的HTML
<div id='mainIconTile1' class="mainIconTile">
</div>
<div id='mainIconTile2' class="mainIconTile">
</div>
<div id='mainIconTile3' class="mainIconTile">
</div>
<div id='mainIconTile4' class="mainIconTile">
</div>
<div id='mainIconTile5' class="mainIconTile">
</div>
<div id='mainIconTile6' class="mainIconTile">
</div>
<div id='mainContentTile1'>
1
</div>
<div id='mainContentTile2'>
2
</div>
<div id='mainContentTile3'>
3
</div>
<div id='mainContentTile4'>
4
</div>
<div id='mainContentTile5'>
5
</div>
<div id='mainContentTile6'>
6
</div>
CSS
.mainIconTile {
background:#888888;
width:20px;
height:20px;
margin:1px;
float:left;
}
#mainIconTile1:hover, #mainIconTile1.active {
background:#5aa02c;
}
#mainIconTile2:hover, #mainIconTile2.active {
background:red;
}
#mainIconTile3:hover, #mainIconTile3.active {
background:blue;
}
#mainIconTile4:hover, #mainIconTile4.active {
background:green;
}
#mainIconTile5:hover, #mainIconTile5.active {
background:pink;
}
#mainIconTile6:hover, #mainIconTile5.active {
background:brown;
}
#mainContentTile1 {
background:orange;
height:50px;
width:50px;
float:left;
clear:left;
display:none;
}
#mainContentTile2 {
background:#e8e8e8;
height:50px;
width:50px;
float:left;
clear:left;
}
#mainContentTile3 {
background:#e8e8e8;
height:50px;
width:50px;
float:left;
clear:left;
display:none;
}
#mainContentTile4 {
background:#e8e8e8;
height:50px;
width:50px;
float:left;
clear:left;
display:none;
}
#mainContentTile5 {
background:#e8e8e8;
height:50px;
width:50px;
float:left;
clear:left;
display:none;
}
#mainContentTile6 {
background:#e8e8e8;
height:50px;
width:50px;
float:left;
clear:left;
display:none;
}
的JavaScript
$(document).ready(function(){
$('div[id*="mainIconTile"]').click(function() {
var theId = $(this).attr("id");
$(".mainIconTile").removeClass('active');
$("#" + theId).addClass('active');
$('.mainContentTile:visible').hide(0, function(){
$('#mainContentTile' + theId.substring(12)).show();
});
});
});
工作演示:http://jsfiddle.net/P3Ckk/145/
关于jquery - jQuery:更改背景颜色而不将其设置为永久(当前禁用了我的CSS:悬停),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11462884/