jQuery：改变背景颜色而不是永久性的（目前它禁用了我的CSS：悬停）

Question

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

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

修改

我发布了一个jsfiddle来更好地解释。您将看到当您第一次在div上扫描鼠标时，它们会悬停不同的颜色。如果你单击div 1或div 2（其他人将无法工作，不打扰为所有这些小提琴做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类的解决方案。