用JS向上悬停

Question

我有一个悬停效果（“ div”在悬停时向上滑动），但是它无法正常工作-由于某种原因，它会在网格中的每个元素上打开，但我只需要将其悬停在mouseover元素上

$(document).ready(function() {
if($(document).width() > 992) {
    $('.one').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();
    });
}});

和

<div class="one">
  <?= $f_AdminButtons ?>
    <div class="img-logo-cat"> <img src="<?= $f_imagelogocatalogue ?>" alt="">
      <div class="link-not-link">
        <?= $f_linkShow ?>
      </div>
    </div>
    <div class="image"><img src="<?= $f_phoneImage ?>" alt=""></div>
    <div class="line"></div>
    <div class="more">
      <div class="morehover">
        <?= nc_edit_inline('morehover', $f_RowID, $cc)?>
          <div class="ssilka-podrob"><a class="ssilka-podrob-link" href="<?= $f_linkMore ?>">Подробнее </a><i class="fas fa-angle-right"></i></div>
      </div><span><?= nc_edit_inline('Price', $f_RowID, $cc)?></span>
      <a href="<?= $f_buttonLink ?>" class="button" target="_blank">
        <?= $f_buttonText ?>
      </a>
    </div>
</div>

我的错误在哪里？

Answer 1

看看这一行：

hint = $(this).parent().find('.morehover');

您位于元素<div class="one">上，并且正在选择其父元素而不是寻找morehover。您希望将morehover放在您所在的元素中，因此您不应查看父元素。

hint = $(this).find('.morehover');