Question

This is my php code:

echo '<div class="code" rel="$url">$title</div>
    <div class="tip">Copy and open site</div>';

the above is a loop’s echo result. Namely, there maybe 0->n like the following html structure

<div class="code" rel="....">...</div>
        <div class="tip">Copy and open site</div>

Now, supposed there are 6 results like the above, I want to use jQuery to get when I put the mouse hover on the first <div class="code" rel="....">...</div> the only first tip div will show. When I move the mouse out, the div will be hidden.

I think using jQuery alone can’t get that effect. There must be some php added to the code, but I don’t know how to do that?

Answer 1

$( 'div.code' ).mouseover( function() {
    $( this ).next( 'div.tip' ).show();
} );

$( 'div.code' ).mouseout( function() {
    $( this ).next( 'div.tip' ).hide();
} );

Edit based on your first comment:

There’s a few possibilities:

$( document ).ready( function() {  // added document ready for completeness
    $( 'div.code' ).mouseover( function() {
        $( this ).next( 'div.tip' ).show();
    } );
    $( 'div.code' ).mouseout( function() {
        $( this ).next( 'div.tip' ).hide();
    } );

    // this is a way after declaring previous stuff:
    $( 'div.code' ).trigger( 'mouseout' );

    // or simply do:
    $( 'div.tip' ).hide();
} );