0

私は自分のウェブサイトのサイドバーに取り組んでいます。ユーザーがカテゴリにカーソルを合わせるとサブメニューが開き、ユーザーがこのサブメニューにカーソルを合わせると、対応するカテゴリの背景色を変更したいと思います。問題を説明するためにjsfiddleを作成しました。この点で助けていただければ幸いです。

私は次のようなことを考えていました。

$(".sidemenu").hover(function(){
    $("category").closest().parent().css("background-color","red");
});

これがJSFiddleです

http://jsfiddle.net/ahren/BGcDc/8/

4

3 に答える 3

1

CSSを編集して、親background colourをに変更しましたwhite。編集されたコードはここにあります：

$(".category").hover(function() {
    $(".submenu").hide();
    $(this).find(".submenu").show().parent().css('background', '#fff');
    $(this).find(".submenu li:eq(0)").css("border-top", "1px solid blue");
    $(this).find(".submenu li:last").css("border-bottom", "1px solid blue");
    $(this).find(".submenu li:first").css("border-left", "none");
    $(this).css("border-bottom", "none");
    $(this).css("width", "205px");
    $(this).css("border", "1px solid blue");
    $(this).css("border-top", "1px solid blue");
    $(this).css("border-right", "none");
});
$(".category:last").css("border-bottom", "1px solid grey");
$(".category").mouseleave(function() {
    $(this).css("background-color", "#eee");
    $(this).css("border", "1px solid grey");
    $(this).css("border-bottom", "none");
    $(this).css("width", "180px");
    $(".category:last").css("border-bottom", "1px solid grey");
});
$(".submenu,#sidebar").mouseleave(function() {
    $(".submenu").hide();
    $(".category").css("width", "180px");
});​

以下の同じCSSも見つけてください。

.category{text-decoration:none; border:1px solid grey; border-bottom:none; width:180px; padding:3px 8px 4px 30px; background-color:#eee;}
.submenu{list-style-type:none; background-color:#eee; width:200px; position:absolute; display:none; margin-left:189px; margin-top:-24px; box-shadow:4px 4px 9px #333;}
.submenu li{padding:3px 8px 4px 10px;  border-left:1px solid blue; border-right:1px solid blue; border-top:1px solid #bbb; border-bottom:none; margin-left:0px; background: #fff;}

お役に立てれば。:)

于 2012-06-06T18:56:57.373 に答える
1

これはそれを行う必要があります

$(".submenu li").mouseenter(function() {
    $(this).parent().parent().css("background-color","yellow");

});
于 2012-06-06T18:58:36.340 に答える
1

$(this).css('background-color','red');これを関数に追加してみてください$(".category").hover();。何度も使用して$(this)いるので、ベストプラクティスのために変数にキャッシュしてみてください。

于 2012-06-06T18:59:45.960 に答える