Question

I cannot make display: block to work on span.

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

With mark-up:

<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>

It simply doesn’t work, but the same technique works elsewhere.

Answer 1

Use find instead of children, as the .hellpopup element isn’t a direct child :

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

(ugly) Demonstration