Question

我编写了一个小菜单，其中悬停会改变鼠标所在字段的颜色。此后，我通过jquery更改了css onclick。

但是，此后的css悬停效果不起作用。我想在点击后保持悬停效果处于活动状态。

代码：（参见jfiddle：http://jsfiddle.net/Cwmpf/）

.vbtn { color:#000B41; }
.vbtn:hover { background-color:#1A2040; color:white; cursor:pointer; }

<div id="overskrift1" class="vbtn" felt="1">Vare</div>
<div id="overskrift2" class="vbtn" felt="2">Guide</div>

<script type="text/javascript">
    $('div.vbtn').click( function() {
        $('div.vbtn').css({'background-color':'white','color':'#000B41'});
        $(this).css('background-color','#1A2040');
        $(this).css('color','white');
        felt = $(this).attr('felt');
        $('div.vniv').each(function() {
            if($(this).attr('felt') != felt) { $(this).css('display','none'); }
            else { $(this).css('display','block'); }
        });
    });
</script>

Answer 1

添加一个.active类，其中包含活动div的样式。

.active{
    background-color: #1A2040;
    color: white;

}

然后用JS

切换这个类

$('div.vbtn').click( function() {
    $("div.vbtn").removeClass("active");
    $(this).addClass("active");
    felt = $(this).attr('felt');
    $('div.vniv').each(function() {
        if($(this).attr('felt') != felt) { $(this).css('display','none'); }
        else { $(this).css('display','block'); }
    });
});

JSFIDDLE： http://jsfiddle.net/Cwmpf/1/

Jquery禁用css悬停效果

1 个答案: