用 JS 向上滑动悬停

Question

我有一个悬停效果（'div' 在悬停时向上滑动），但它不能正常工作 - 由于某种原因，它在网格中的每个元素上打开，但我需要它只在鼠标悬停元素

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

用 JS 向上滑动悬停

Slide up hover with JS

javascript

hover

mouseover