如何在滚动过程中保持悬停，或者如何检测未滚动

How can I keep hover during scrolling or how detect NOT scrolling

本文关键字：滚动 何检测 或者 检测 悬停 过程中      更新时间：2023-09-26

我有巨大的绿色div块（具有屏幕高度）。当我悬停其中一个时，它会将其颜色更改为黄色，并将块中的图像更改为"slidesup"。当我滚动时，块的颜色回滚到绿色（图像"滑动向下"），停止滚动后，块再次变为yeallow（图像再次"滑动向上"）。在滚动过程中，如何保持div块悬停？

<div class="news-block"><img scr=''></div>
<div class="news-block"><img scr=''></div>
<div class="news-block"><img scr=''></div>
<div class="news-block"><img scr=''></div>
<div class="news-block"><img scr=''></div>
<div class="news-block"><img scr=''></div>
<style>
    .news-block {
        width: 33%;
        color: green;
        height: 700px;
    }
</style>
<script>
    $(".news-block").hover(
        function () {
            $(this).css({color: 'yellow'});
            $(this).find('img').slideUp(180, function() {});
        },
        function () {
            $(this).css({color: 'green'});
            $(this).find('img').slideDown(180, function() {});
        }
    );
</script>

添加。或者可能只有当用户不滚动时我才能解除覆盖？如何检测不滚动

$(".news-block").on('mouseover',
    function () {
        $(this).find('.event-info').stop().hide().css({opacity: 0});
        $(this).find('.picture-block').stop().slideUp(180, function() {
            $(this).find('.news-text').stop().show().animate({opacity: 1}, 500);
            $(this).find('#voting-block').stop().show().animate({opacity: 1}, 500);
        });
    }
);

$(".news-block").on('mouseout',
    function () {
        --------------if not scrooll do the next ---------------
        $(this).find('.event-info').stop().hide().css({opacity: 0});
        $(this).find('.picture-block').stop().slideUp(180, function() {
            $(this).find('.news-text').stop().show().animate({opacity: 1}, 500);
            $(this).find('#voting-block').stop().show().animate({opacity: 1}, 500);
        });
    }
);

您可以使用CSS悬停，它也可以在滚动过程中工作，并且可以向下滑动图像。

.news-block {
  position: relative;
  width: 300px;
  background: green;
  height: 700px;
  overflow: hidden;
}
.news-block img {
  position: absolute;
  top: -120px;
  transition: top 1s;
}
.news-block:hover {
  background: yellow;
}
.news-block:hover img {
  top: 20px;
  transition: top 1s;
}
<div class="news-block">
  <img src="http://lorempizza.com/200/120" alt="pizza">
</div>
<div class="news-block">
  <img src="http://lorempizza.com/200/120" alt="pizza">
</div>
<div class="news-block">
  <img src="http://lorempizza.com/200/120" alt="pizza">
</div>

相关文章：