懸停父親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>