jquery - jquery onmouseover 效果不起作用

Question

我试图做这样的事情：

当我将鼠标悬停在我的按钮上时，当我的鼠标退出时，文本应该消失，文本应该再次显示..

这是我的示例jsfiddle

     <div class="frmSnippet fsNoIndent submit">
        <div class="fsInner">

            <button id="requestBooking" class="btn bookingButton" type="submit">Request booking</button>
            <span id="enquireNow" class="btn alt bookingButton" type="submit">Enquire now</span>
    <a href="http://www.paypal.com">
    <span id="payNow" class="btn alt bookingButton">Pay now</span>
    </a>

            <p class="note"><strong>This is a booking request ONLY.</strong> This doesn't guarantee the availability of the property.</p>

        <script type="text/javascript">
    $(document).ready(function(){

                $("#payNow").mouseover(function () {
                  $( this ).find( ".note" ).text( "" );
        })
        .mouseout(function() {
              $( this ).find( ".note" ).text( "mouse out " );
        });

    });
</script>

但问题是我似乎无法让它发挥作用。

Answer 1

.note 不是 payNow 的子节点，使用最接近和 next()

$( this ).closest('a').next().text( "" );

或者只是使用

$('.note').text("");

演示

Answer 2

使用演示

$(this).closest('a').next("p.note").text("mouse out ");

读

http://api.jquery.com/next/

http://api.jquery.com/closest/