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

Question

Trying to show the <span> when mouseover the <div> and after 5 seconds hide the <span> . Can't get this to work.

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

Thanks for any info.

Answer 1

your code does work, you are assigning the value of altDiv in the wrong place...

change your JS to:

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

No need to reference the ID of the <span> in the <div> if the markup is always going to be a <div> followed by a <span> . Use jQuery next() method to get the immediate next sibling element.

 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> 

With my solution I'm assuming you always want the <span> to hide five seconds after they mouseout the <div> . To do this I had to re-work how setTimeout() was being handled. Your original code was canceling the five second setTimeout() whenever another .ShowCat was hovered, effectively leaving it visible.

Example of Original Side Effect

 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> 

Hover the first <div> then hover the second <div> without re-hovering the first <div> , first <span> stays red while second <span> disappears.

If you do need to reference the <span> ID on the <div> I'd recommend using a data- attribute as alt is not a valid attribute for a <div> . alt is valid for the following elements: <applet> , <area> , <img> , <input> .

Answer 3

This line of code

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

is not doing what you think. this points to the parent function scope, in this case, the function that .ready is calling; it is not referencing the element that you are hovering. Instead, you should capture the value of the alt attribute within your handler:

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

Note alt attribute on the div element is invalid, so I'd recommend instead using data-alt="..." and getting it with .data instead:

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

Answer 4

In this solution a timeout is associated to each ShowCat element, not sure if this applies to your requirements:

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