我目前有一组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/

10-09 20:26
查看更多