时间戳

首页 > 解决方案 > 用 JS 向上滑动悬停

javascript - 用 JS 向上滑动悬停

问题描述

我有一个悬停效果（“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>

截屏

我的错误在哪里？

标签： javascripthovermouseover

解决方案

看看这一行：

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

您在元素上，<div class="one">并且您正在选择它的父元素而不是寻找morehover. 你想要morehover你所在元素的内部，所以你不应该看父元素。

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

推荐阅读