0

new_r_div にマウスオーバーすると、li リンクの色を変更したいと思います。そのために、リンク ID にホバー クラスを含めました。マウスオーバーで要素の背景を変更する必要があります これは私のコードリンクです見てください

HTML

<div id="response"> <a href="#">Response Request</a>
    <div class="new_r_div hidden">
        <ul>
            <li><a href="#" id="link">Confirm</a></li>
            <li><a href="#" id="link">Delete</a></li>
        </ul>
    </div>
</div>

jQuery

$("#response").hover(
    function () {
        $('.new_r_div').removeClass('hidden');
    }, 
    function () {
        $('.new_r_div').addClass('hidden');
    }
);

$("#new_r_div").hover(
    function () {
        $('#link').addClass('hover');
    }, 
    function () {
        $('#link').removeClass('hover');
    }
);

CSS

.new_r_div {
    position:absolute;
    width:100px;
    height:40px;
    background:#ccc;
    overflow: hidden;
    border: solid 2px #ccc;
    background: #99CCFF;
    z-index: 9999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.hidden {
    visibility: hidden;
}
.hover {
    background:red;
}
4

8 に答える 8

1

このコードにはいくつかの問題があることに気付きました。複数の要素aがあったため、1 つのタグに対してのみ機能していました。#link次のコードは、両方のアンカーで機能するはずです。

$("#response").hover(function(){
    $('.new_r_div').removeClass('hidden');
},function(){
    $('.new_r_div').addClass('hidden');
});

//switched selector to only target the anchor tags
$(".new_r_div li a").hover(function(){  
    $(this).addClass('hover');  //targeting anchor tags allow us to use this
},function(){
    $(this).removeClass('hover');
});

例: http://jsfiddle.net/QQvv6/23/

于 2013-01-28T10:10:47.487 に答える
1

# は、classSelector を使用する必要がある ID を選択するために使用されます。以下のコードを参照してください

$(".new_r_div").hover(function(){
    $('#link').addClass('hover');
},function(){
    $('#link').removeClass('hover');
});

http://jsfiddle.net/QQvv6/9/

于 2013-01-28T10:08:59.577 に答える
0

編集: jsFiddle 作業コード: http://jsfiddle.net/joquery/QQvv6/7/

コードにいくつかのエラーがあります:

  1. id="link"同じ ID ( )の要素を使用することはできません
  2. new_r_divID ではなく、html のクラスです
  3. の子であるすべての listitem にカーソルを合わせたいとしますnew_r_div。$(".new_r_div li")したがって、代わりに書く必要があります$(".new_r_div")

JavaScript を更新しました:

$("#response").hover(function(){
    $('.new_r_div').removeClass('hidden');
},function(){
    $('.new_r_div').addClass('hidden');
});
$(".new_r_div li").hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
});
于 2013-01-28T10:13:31.897 に答える
0 
$("#new_r_div").hover(...)

new_r_divクラスであって、そうではないid

<li><a href="#" id="link">Confirm</a></li>
<li><a href="#" id="link">Delete</a></li>

id一意である必要があります

そして、あなたの例はjqueryなしで書くことができます:

.new_r_div:hover{
    background:red;
}

デモ: http://jsfiddle.net/QQvv6/19/

追加: または http://jsfiddle.net/QQvv6/27/ (ホバー メニュー項目)

于 2013-01-28T10:14:18.130 に答える
0

私があなたの質問を正しく理解していると仮定すると、これには CSS だけを使用できます - jquery は必要ありません:

.new_r_div li:hover {
    background-color: red;
}

$("#response").hover(
    function () {
        $('.new_r_div').removeClass('hidden');
    }, 
    function () {
        $('.new_r_div').addClass('hidden');
    }
);

更新されたフィドル

于 2013-01-28T10:11:00.020 に答える
0

HTML

<div id="response">
                <a href="#">Response Request</a>

<div class="new_r_div hidden">
    <ul>
        <li class="menuItem"><a href="#"  >Confirm</a></li>
        <li class="menuItem"><a href="#"  >Delete</a></li>

    </ul>
  </div>
</div>

Jクエリ

$("#response").hover(function(){
    $('.new_r_div').removeClass('hidden');
},function(){
    $('.new_r_div').addClass('hidden');
});

$(".menuItem").hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
});

フィドルの例

于 2013-01-28T10:17:24.657 に答える
0

あなた new_r_divはそうではなく、セレクターはそうではclassありませんid.

これを試して

 $(".new_r_div").hover(function(){
 ....
于 2013-01-28T10:09:35.700 に答える
0

最初: 同じ ID "link" を 2 回使用しました。ID はドキュメント内で 1 回しか使用できません。ID は一意である必要があります。2 番目: background-color のプロパティは "background" ではなく "background-color" です :) 3 番目: 混乱しました: リスト コンテナーにはクラスがありますが、ID で選択しようとしました。

これがあなたが望んでいたことだと思います：

    $("#response").hover(function(){
    $('.new_r_div').removeClass('hidden');
},function(){
    $('.new_r_div').addClass('hidden');
});
$(".new_r_div").find(".link").hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
});
于 2013-01-28T10:19:23.510 に答える