jQuery:更改背景颜色而不使其永久(目前它禁用了我的css:悬停)

Question

我目前有一组div（按钮），它们都使用css悬停在各种颜色上。当按下其中一个div时，我使用jQuery使颜色永久化，并将所有其他div的颜色恢复为默认颜色。

然而，似乎一旦完成，悬停颜色就不再起作用了。我接近jQuery错了吗？我该怎么解决这个问题。这里有一个例子：

编辑

我发布了一个jsfiddle来更好地解释。您将看到，当您第一次在div上扫描鼠标时，它们悬停在不同的颜色上。如果您单击div 1或div 2（其他的都不起作用，没有为它们所有的fiddle执行jQuery代码），div将保持其颜色，任何其他的都将恢复为原始颜色。但是，这会禁用CSS中的：hover伪类。我需要帮忙修理。

http://jsfiddle.net/P3Ckk/143/

最好的解决方案是什么？

Answer 1

工作演示：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/

Answer 2

我不知道为什么会发生这种情况（很奇怪），但当我使用时

$("div#mainIconTile1").hover(function () {
   $(this).css("background", "#5aa02c");
}, function () {
   $(this).css("background", "#888");
});

成功了！因此，在这种情况下，如果CSS不起作用，您可能需要依赖jQuery悬停。当然，还有添加/删除css类的解决方案。