jquery onmouseover effect not working

Question

I tried to do something like this:

When I would hover over my button, the text should disappear when my onmouseout, text should display again..

This is my sample 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>

But the problem is I can't seem to make it work.

Answer 1

Use DEMO

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

Read

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

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

Answer 2

.note is not a child of payNow use closest and next()

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

or just use

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

DEMO