悬停父亲div＆gt;显示孩子div。 OnMouseOut＆gt;在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

您的代码确实有效，您将altDiv的值分配到错误的位置......

将您的JS更改为：

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

Answer 2

如果标记始终是<span>后跟<div>，则无需引用<div>中<span>的ID。使用jQuery next()方法获取下一个兄弟元素。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

根据我的解决方案，我假设您始终希望<span>在mouseout <div>之后隐藏五秒钟。要做到这一点，我必须重新处理setTimeout()的处理方式。每当另一个setTimeout()悬停时，您的原始代码就会取消五秒.ShowCat，从而使其可见。

原始副作用的例子

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

将第一个<div>悬停，然后将第二个<div>悬停而不重新悬停第一个<div>，第一个<span>保持红色，而第二个<span>消失。< / p>

如果您确实需要在<span>上引用<div> ID，我建议您使用data- attribute，因为alt不是<div>的有效属性{1}}。 alt对以下元素有效：<applet>，<area>，<img>，<input>。

Answer 3

这行代码

altDiv = $(this).attr('alt');

没有按你的想法行事。 this指向父函数范围，在本例中是.ready正在调用的函数;它没有引用您正在悬停的元素。相反，您应该在处理程序中捕获alt属性的值：

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

div元素的

注意 alt属性无效，因此我建议改为使用data-alt="..."并将其与.data取代：

var altDiv = $(this).data('alt');

Answer 4

在此解决方案中，超时与每个ShowCat元素相关联，不确定这是否适用于您的要求：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

＆＃13;

＆＃13;

＆＃13;