jquery - このアニメーションが機能しない理由を誰かに教えてもらえますか？

Question

display: blockに取り組むことができませんspan。

$(".wishlistbtn, .compareboxbtn").hover(
    function() { $(this).children(".helppopup").show(); },
    function() { $(this).children(".helppopup").hide(); }
);

マークアップあり：

<ul>
    <li class="wishlistbtn"><a href="#">Wishlist <span class="helppopup">Add to my Wishlist<img src="images/helppopup-arrow.png" alt=""></span></a></li>
    <li class="compareboxbtn"><a href="#">Compare <span class="helppopup">Add to compare box<img src="images/helppopup-arrow.png" alt=""></span></a></li>
    <li class="getquotebtn"><a href="#">Get Quote</a></li>
</ul>

それは単に機能しませんが、同じテクニックが他の場所でも機能します。

Answer 1

要素は直接の子ではないため、のfind代わりに使用します。children.hellpopup

$(".wishlistbtn, .compareboxbtn").hover(
    function() { $(this).find(".helppopup").show(); },
    function() { $(this).find(".helppopup").hide(); }
);

（醜い）デモンストレーション

Answer 2

$(".wishlistbtn, .compareboxbtn").hover(
// the .helpopup's are grandchildrean, not children of 'this'
    function() { $(this).find(".helppopup").show(); },
    function() { $(this).find(".helppopup").hide(); }
);

Answer 3

$（document）.ready（）;で関数を実行していることを確認してください。domがロードされた後。