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个结果如上所述，当我将鼠标悬停在第一个<div class="code" rel="....">...</div>上时，我想使用jQuery来获得唯一的第一个提示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的悬停属性指向你的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();
} );

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

2 个答案: