3

現在、css を使用してさまざまな色をホバーする div (ボタン) のセットがあります。この div の 1 つが押されると、jQuery を使用して色を固定し、他のすべての div の色をデフォルトに戻しました。

ただし、これが完了すると、:hover の色が機能しなくなったようです。jQueryへのアプローチが間違っていますか? どうすればこれを修正できますか。次に例を示します。

編集

より良い説明のためにjsfiddleを投稿しています。最初に div をマウスでスキャンすると、それらが異なる色でホバーすることがわかります。そして、div 1 または div 2 のいずれかをクリックすると (他のものは機能せず、すべてのフィドルの jQuery コードを実行する必要はありませんでした)、div はその色を保持し、他のものは元に戻ります。ただし、これにより、CSS にある :hover 疑似クラスが無効になります。これを修正するのに助けが必要です。

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

これに対する最善の解決策は何ですか？

4

2 に答える 2

2

実際のデモ: 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>

<strong>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;
}

</p>

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/

于 2012-07-13T01:58:18.243 に答える
1

なぜこれが起こっているのかわかりませんが（かなり奇妙です）、使用したとき：

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

出来た！この場合、CSS が機能しない場合は、jQuery ホバーに頼ることができます。もちろん、css クラスを追加/削除するソリューションもあります。

于 2012-07-13T02:04:44.443 に答える