When you hover over an element, a block with text should pop up, implemented with JS like this:

$(document).ready(function() { if($(document).width() > 992) { $('.button').hover(function() { var color = $(this).css('background-color'); $('.morehover').css('border-top-color', color).clearQueue().delay(500).slideDown(); }, function() { $('.morehover').clearQueue().delay(500).slideUp(); }); $('.morehover').hover(function() { $('.morehover').clearQueue().delay(500).slideDown(); }, function() { $('.morehover').clearQueue().delay(500).slideUp(); });}});

And everything would be fine, but when you hover, blocks of all elements open:

screenshot

How to make the block open only for the active element?

CSS, if necessary:

 .morehover { font-size: 12px; line-height: 18px; display: none; background: rgb(255, 255, 255); position: relative; overflow: overlay; z-index: 999999999; padding: 5px; border-top-color: rgb(255, 192, 0); height: 100px; margin-top: -100px;

}

UPD: markup

 <div class="image"> <img src="<?= $f_phoneImage ?>" alt=""></div> <div class="more"><div class="morehover"><?= nc_edit_inline('morehover', $f_RowID, $cc)?></div> <span><?= nc_edit_inline('Price', $f_RowID, $cc)?></span> <a href="<?= $f_buttonLink ?>" class="button"><?= $f_buttonText ?></a></div>

    1 answer 1

    If I understand the question correctly, then you need a hint to appear only on the object above which the cursor ...

    When you search by class, you are looking for all objects, you need to search only within the parent of the current object $ (this) .parent ()

    To do this, you need to change your code.

     $(document).ready(function() { if($(document).width() > 992) { $('.button').hover(function() { var color = $(this).css('background-color'); $('.morehover').css('border-top-color', color).clearQueue().delay(500).slideDown(); }, function() { $('.morehover').clearQueue().delay(500).slideUp(); }); $('.morehover').hover(function() { $('.morehover').clearQueue().delay(500).slideDown(); }, function() { $('.morehover').clearQueue().delay(500).slideUp(); });}});

    The next

     $(document).ready(function() { if($(document).width() > 992) { $('.button').hover(function() { var color = $(this).css('background-color'), hint = $(this).parent().find('.morehover'); if (($(hint).text()).trim() == "") return 0; $(hint).css('border-top-color', color).clearQueue().delay(500).slideDown(); }, function() { var hint = $(this).parent().find('.morehover').first(); $(hint).clearQueue().delay(500).slideUp(); }); } });

    You can also look at the foam

    Codepen

    • Replaced, but for some reason does not come out - just the block does not appear ( - DanBi
    • Thank you very much, but unfortunately it did not work - probably something with html, in your example with Kodopen, to be honest, I didn’t quite understand the markup - DanBi
    • Damn, just fire! Thanks a lot! - DanBi
    • Last question, if you can! Is it possible to make it so that it does not open if the block is empty? - DanBi
    • Once again, thank you very much !! - DanBi