1

JQueryを使用してホバー時にmenuOptionbackground-colorを変更しようとしています。私のコードはすべて正常に機能します。私が抱えている唯一の問題はCSSに関連しているようです。背景色が変わると、div全体ではなく、テキストの背景色だけが変わるように見えます。これが私が望んでいることです。私が奇妙だと思うのは、menuOption要素のインラインCSSに移動し、background-colorを手動で変更すると、div全体の背景色が変更されることです（これが私が望むものです）。ただし、JQueryを使用してこれを実現する必要があります。

マークアップスニペット

<div class='menuOption' style='list-style-type:none; border:1px solid red; float:left; width:180px; height:20px;'>
<a href='index.php/shop/$sub[cat_url]/' style='color:black;'>
<div class='cat_name'>$sub[cat_title]</div>
</a>
<div class='sub_menu' style='display:none; z-index:100; margin-top:-12px; position:absolute; background-color:#ddd; margin-left:182px; box-shadow:3px 3px 6px #444;'>$itemlist</div>
</div>

JQueryスニペット

$(".cat_name").hover(function(){
    $(this).parent().parent().find(".sub_menu").show();
    $(this, ".menuOption").css("background-color", "#bbb");
});
$(".cat_name").mouseleave(function(){
    $(this, ".menuOption").css("background-color", "#eee");
});

これを理解する方法についての提案に感謝します。ありがとうございました。

4

5 に答える 5

1

これはあなたが望むことをするはずです：

例： http： //jsfiddle.net/jrDph/3/

$(".cat_name").hover(function() {
    $menuOption = $(this).closest(".menuOption");
    $menuOption.find(".sub_menu").show();
    $menuOption.css("background-color", "#bbb");
},
function() {
    $menuOption = $(this).closest(".menuOption");
    $menuOption.find(".sub_menu").hide();
    $menuOption.css("background-color", "#eee");
});​
于 2012-04-06T03:53:44.643 に答える
0

理論：JavaScriptを「ドキュメントのロード後にこれを行う」ブロックに入れていません。これは次のようになります。

$.fn.ready(function() {
    $(".cat_name").hover(function(){
        $(this).parent().parent().find(".sub_menu").show();
        $(this, ".menuOption").css("background-color", "#bbb");
    });
    $(".cat_name").mouseleave(function(){
        $(this, ".menuOption").css("background-color", "#eee");
    });
});

参考までに、$.fn.ready別の言い方をします$(document).ready（これはより速いと思います）。

ただし、それは完全に別の問題である可能性があります。

于 2012-04-06T03:26:39.017 に答える
0

このコードを試してください

http://jsfiddle.net/jt795/1/

$(this, "menuoption") it's not the rightway

個別にコーディングする$（this）.css（....）$（ "menuoption"）。css（...）$（this）はオブジェクトを返すため、タグ名は付けられないため、次のように書くことはできません。それ。

于 2012-04-06T03:36:16.897 に答える
0

jQueryについての考えは次のとおりです。

DOMを検索するfind（）を使用する場合は、（。parent（）。parent（）の代わりに）DOMを検索するclosest（）を使用する必要があります。.closest（'div'）または.closest（'。menuOption'）を入れることができます。次に、猫の名前をラップする別の要素を追加する必要がある場合は、別のparent（）呼び出しを追加する必要はありません。通常、1回のメソッド呼び出しの方が複数回の呼び出しよりも優れています。

また、私はコーヒースクリプトの大きな支持者になりつつあります。http://coffeescript.org/。少し新しいことを学びたいと思っているなら、それを調べてください。これはjavascriptにコンパイルされ、すべての角かっこ、括弧、セミコロンを除いたjavascriptとほとんど同じように見えます。読みやすいコードが最高のコードです！

于 2012-04-06T03:38:15.847 に答える
0

このコードを試す

$(".cat_name").hover(function(){
  $(this).parent().parent().find(".sub_menu").show();
  $(this).css("background-color", "#bbb");
  $(".menuOption").css("background-color", "#bbb");
}, function(){
  $(this).css("background-color", "#eee");
  $(".menuOption").css("background-color", "#eee");
});
于 2012-04-06T03:39:35.913 に答える