在鼠标悬停前一个 div 时显示/隐藏下一个 div

Question

这是我的 php 代码：

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

以上是循环的回显结果。即可能有 0->n 像下面的 html 结构

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

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

我认为单独使用 jQuery 无法达到这种效果。代码里肯定加了一些php，不知道怎么弄？

Answer 1

您需要更具体地参考提示 DIV，而不仅仅是类选择器。 比如……

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

然后让#link1的hover属性指向你的JQuery显示代码。

Answer 2

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