0

LIをホバリングしたときにのみ段落を表示する単純なjqueryコード

<ol id="sortme">
<li>this content <p class="edit">first hidden content</p></li>
<li>this content <p class="edit">second hidden content</p></li>
<li>this content <p class="edit">third hidden content</p></li>
</ol>

Jクエリ

$(".edit").hide;
$('#sortme li').hover(
                function () {
                  $(".edit").show();
                },
                function () {
                  $(".edit").hide();
                 }
              );

私の問題は、liのいずれかをホバリングするとすべての段落が表示され、1つずつ実行する必要があるため、最初のliをホバリングすると「最初の非表示のコンテンツ」が表示され、2番目のliをホバリングすると「最初の非表示のコンテンツ」が消え、「2番目の非表示のコンテンツ」が表示されます

リストの残りについても同様

4

4 に答える 4

3

thisの 2 番目のパラメーターとして指定することで、コンテキスト内で検索でき$()ます。

$(".edit").hide;
$('#sortme li').hover(
    function () {
        $(".edit", this).show();
    },
    function () {
         $(".edit", this).hide();
    }
);
于 2012-09-29T14:08:56.263 に答える
1

これを行う -

$('#sortme li').hover( function () {
     $(this).find(".edit").show();
   },
   function () {
     $(this).find(".edit").hide();
   });

また

 $('#sortme li').hover(function () {
   $(this).find(".edit").toggle();
 });
于 2012-09-29T14:09:48.960 に答える
1

children of currentshow hide をli having classedit insteadに適用して、every elementhaving class に適用する必要がありますedit

ライブデモ

$(".edit").hide;
$('#sortme li').hover(
   function () {
         $(this).find('.edit').show();
    },
    function () {
         $(this).find('.edit').hide();
    }
);
于 2012-09-29T14:12:50.857 に答える
0

CSSのみを使用して同じ効果を達成できます。 http://jsfiddle.net/LNsaa/

#sortme p {
    display: none;
}

#sortme li:hover > p {
    display: block;
}​

次に、CSS3トランジションを適用して、すてきでスムーズな効果を得ることができます。

于 2012-09-29T14:30:35.830 に答える