jquery鼠标悬停效果不起作用

时间:2013-10-14 11:53:30

标签: jquery html css

我试着这样做:

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

这是我的样本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>

但问题是我似乎无法使其发挥作用。

2 个答案:

答案 0 :(得分:3)

.note不是payNow使用最近和next()

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

或只是使用

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

DEMO

答案 1 :(得分:1)

使用DEMO

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

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

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