在上一个div的鼠标悬停时显示/隐藏下一个div [英] Showing/hiding the next div on mouseover of the previous div

问题描述

这是我的php代码:

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

以上是循环的回显结果.即，可能有0-> n类似于以下html结构

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>

现在，假设有6个类似上面的结果，当我将鼠标悬停在第一个<div class="code" rel="....">...</div>上时，我想使用jQuery来获取，唯一的第一个提示div将显示出来.当我将鼠标移出时，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.

我认为仅使用jQuery并不能达到那种效果.必须在代码中添加一些php，但是我不知道该怎么做?

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?

推荐答案

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

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

根据您的第一条评论进行

有几种可能性:

$( 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();
} );

这篇关于在上一个div的鼠标悬停时显示/隐藏下一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！