时间戳

首页 > 解决方案 > 滚动时如何悬停？

javascript - 滚动时如何悬停？

问题描述

此代码将悬停在指针移动上，但在滚动我必须在此处加入的代码行时我需要悬停。滚动页面时，必须隐藏悬停

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <a href="#" class="image-wrap">
      <img class="img-responsive" src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" style="width:700px;height:800px;"/>
        <div class="overlay red">
        <h3>Image Heading</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, tempore?</p>
        </div>
        </a>
            
       
    </div>
  
  </div>
</div>
<style>
.col-sm-6 {
  min-height: 500px;
  background: lightgrey;
  text-align: center;
}

.image-wrap {
  display: inline-block;
  max-width: 100%;
  position: relative;  
}

.image-wrap .overlay {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  color:white;
  opacity: 1;
  transition:opacity .5s ease;
}

.image-wrap:hover .overlay {
  opacity: 0;
}

.red {
  background: rgba(0, 0, 6, 0.7);
}


</style>

我必须在这里做什么。请帮我解决这个问题。

标签： javascripthtmlcss

解决方案

您可以通过添加/删除pointer-events: none滚动时具有的类来实现这一点：

var body = document.body,
    timer;

window.addEventListener('scroll', function () {
    clearTimeout(timer);

    if (!body.classList.contains('disable-hover')) {
        body.classList.add('disable-hover');
    }

    timer = setTimeout(function () {
        body.classList.remove('disable-hover');
    }, 500);
}, false);
.col-sm-6 {
    min-height: 500px;
    background: lightgrey;
    text-align: center;
}

.image-wrap {
    display: inline-block;
    max-width: 100%;
    position: relative;
}

.image-wrap .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    opacity: 1;
    transition: opacity .5s ease;
}

.image-wrap:hover .overlay {
    opacity: 0;
}

.red {
    background: rgba(0, 0, 6, 0.7);
}

.disable-hover,
.disable-hover * {
  pointer-events: none !important;
}
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <a href="#" class="image-wrap">
                <img class="img-responsive" src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt=""
                    style="width:700px;height:800px;" />
                <div class="overlay red">
                    <h3>Image Heading</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, tempore?</p>
                </div>
            </a>
        </div>

    </div>
</div>

如果您想知道这种方法的强大技术，您可以查看本教程。

推荐阅读