悬停父亲div>显示子div。 OnMouseOut> X秒后隐藏子div

Question

尝试将鼠标悬停在<div> <span>时显示<span> ，并在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

无需引用的ID <span>在<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()处理方式。 您的原始代码每当悬停另一个.ShowCat时就取消五秒钟的setTimeout() ，从而有效地使其可见。

原始副作用示例

 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>消失。

如果确实需要引用<div>上的<span> ID，我建议使用data- attribute属性，因为alt对于<div>不是有效属性。 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元素相关联，不确定是否适用于您的要求：

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

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

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