javascript - 悬停父 div > 显示子 div。 OnMouseOut > 在 X 秒后隐藏子 div

Question

试图显示 <span>当鼠标悬停在 <div> 上时5 秒后隐藏 <span> .无法正常工作。

$(document).ready(function() {
  altDiv = $(this).attr('alt');
  var timeout;
  $('.ShowCat').on("mouseover", function(e) {
    $('#' + altDiv).show();
    clearTimeout(timeout);
  });
  $('.ShowCat').on("mouseout", function() {
    timeout = setTimeout(function() {
      $('#' + altDiv).hide();
    }, 5000);
  });
});

.hide {
  background-color: red;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div alt="REF-C000000" class="ShowCat">C000000</div>
<span id="REF-C000000" class="hide">C1 C2 C3</span>
<br>
<div alt="REF-C000001" class="ShowCat">C000001</div>
<span id="REF-C000001" class="hide">C4 C5 C6</span>

感谢您提供任何信息。

Answer 1

无需引用 <span> 的 ID在<div>如果标记总是 <div>其次是 <span> .使用 jQuery next() 获取紧接的下一个兄弟元素的方法。

var $show = $( '.ShowCat' );

$show.on( 'mouseover', function ( e ) {
  
    var $this = $( this );
        
    clearTimeout( $this.data( 'tID' ) );
        
    $this.next().show();
    
} );
  
  
$show.on( 'mouseout', function ( e ) {
  
    var $this = $( this );
    
    $this.data( 'tID', setTimeout( function () {
      $this.next().hide();  
    }, 5000 ) );
    
} );

.hide {
  background-color: red;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="ShowCat">C000000</div>
<span id="REF-C000000" class="hide">C1 C2 C3</span>
<br>
<div class="ShowCat">C000001</div>
<span id="REF-C000001" class="hide">C4 C5 C6</span>

在我的解决方案中，我假设您总是想要 <span>在他们之后隐藏五秒钟mouseout <div> .为此，我必须重新工作 setTimeout()正在处理。您的原始代码正在取消五秒 setTimeout()每当另一个.ShowCat悬停，有效地使其可见。

原始副作用示例

var $show = $( '.ShowCat' ),
    tID;

$show.on( 'mouseover', function ( e ) {
  
    var $this = $( this );
        
    clearTimeout( tID );
        
    $this.next().show();
    
} );
  
  
$show.on( 'mouseout', function ( e ) {
  
    var $this = $( this );
    
    tID = setTimeout( function () {
      $this.next().hide();  
    }, 5000 );
    
} );

.hide {
  background-color: red;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="ShowCat">C000000</div>
<span id="REF-C000000" class="hide">C1 C2 C3</span>
<br>
<div class="ShowCat">C000001</div>
<span id="REF-C000001" class="hide">C4 C5 C6</span>

悬停第一个<div>然后将鼠标悬停在第二个 <div>无需重新悬停第一个 <div> , 第一 <span>第二个保持红色<span>消失。

如果您确实需要引用 <span> ID <div>我建议使用 data- attribute作为alt不是 <div> 的有效属性. alt对以下元素有效:<applet> , <area> , <img> , <input> .