时间戳

首页 > 解决方案 > 为悬停时的 switchClass 创建验证，以便动画与鼠标进入和离开 div 时相关联

jquery - 为悬停时的 switchClass 创建验证，以便动画与鼠标进入和离开 div 时相关联

问题描述

使用悬停功能，当鼠标进入和离开父 div 时，我有一些 div 会切换类。问题是，如果鼠标离开网页，switchClass 会保持切换状态，我只想在鼠标悬停在父 div 中时发生。

所以我有一系列的行。它们是用一个容器构建的，然后是两个并排的 div，child1 和 child2。当鼠标不在容器中时，child1 为 100% 宽度，child2 通过 overflow: hidden 隐藏。当鼠标悬停在容器上时，child1 切换到 child1-hover 类，child2 滑入视图，反之亦然。

我让它与 hover() 一起工作，但我宁愿使用 mouseEnter 和 mouseLeave 进行某种验证，因为如果我在行上滚动太快或者如果我的鼠标离开网页，开关就会切换，所以当我不悬停在孩子应用了 child1-hover 的容器上，反之亦然。

这是我的问题：

  1. 我不喜欢当我滚动太快或鼠标离开网页时，我的 switchClass 中的悬停状态变为非悬停状态。看到这个版本：https ://jsfiddle.net/sling/g7xLn1ut/6/
  2. 我必须使用类，而不是 ID，因为这个网页上有 30 行，所以我必须使用 a $('.container').hover(function() { ->>>$(this).find<<<-just 让事情变得更复杂一些
  3. 即使使用 mouseenter 和 mouseleave，当我使用 switchClass 时，我仍然遇到同样的问题。看到这个版本：https ://jsfiddle.net/sling/d6x4sfLn/
  4. 我不希望这个功能减慢我的网站速度，所以我不希望它像每 10 秒刷新一次页面或任何东西......所以，考虑到这一点，也许最好有一个滚动到高度使 child1 切换到 child1-hover 的激活器？这更像是一个设计/意见问题/一个后备，以防我想要发生的事情是不可能的

请注意，这只是上面链接的小提琴的截断版本

<style>
    .container {
        width: 100%;
        height: 200px;
        overflow: hidden;
    }

    .child1 {
        width: 100%;
        height: 200px;
        background-image: url('http://www.steves-digicams.com/blog/wp-content/uploads/2017/10/Nikon_D850_Sample_13.jpg');
        background-size: cover;
        display: inline-block;
    }

    .child2 {
        width: 1px;
        display: inline-block;
        vertical-align: top;
    }

    .child1-hover {
        width: 40%;
        height: 400px;
        background-image: url('http://www.steves-digicams.com/blog/wp-content/uploads/2017/10/Nikon_D850_Sample_13.jpg');
        background-size: cover;
        display: inline-block;

    }

    .child2-hover {
        width: 50%;
        height: 400px;
        display: inline-block;
        vertical-align: top;
    }

</style>
<div class="container">
    <div class="child1">
    </div>
    <div class="child2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit enim orci. Aenean vulputate scelerisque lorem sagittis lacinia. Nunc vitae massa felis.
    </div>
</div>
<div class="container">
    <div class="child1">
    </div>
    <div class="child2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit enim orci. Aenean vulputate scelerisque lorem sagittis lacinia. Nunc vitae massa felis.
    </div>
</div>
<div class="container">
    <div class="child1">
    </div>
    <div class="child2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit enim orci. Aenean vulputate scelerisque lorem sagittis lacinia. Nunc vitae massa felis.
    </div>
</div>

<script>
$(function() {
          $(".container").hover(function() {
            $(this).find(".child1").switchClass("child1", "child1-hover", 300);
            $(this).find(".child1-hover").switchClass("child1-hover", "child1", 300);
            $(this).find(".child2").switchClass("child2", "child2-hover", 300);
            $(this).find(".child2-hover").switchClass("child2-hover", "child2", 300);
          });
        });
</script>

好的，这是第二版：

<style>
    .container {
        width: 100%;
        height: 200px;
        overflow: hidden;
    }

    .child1 {
        width: 100%;
        height: 200px;
        background-image: url('http://www.steves-digicams.com/blog/wp-content/uploads/2017/10/Nikon_D850_Sample_13.jpg');
        background-size: cover;
        display: inline-block;
    }

    .child2 {
        width: 1px;
        display: inline-block;
        vertical-align: top;
    }

    .child1-hover {
        width: 40%;
        height: 400px;
        background-image: url('http://www.steves-digicams.com/blog/wp-content/uploads/2017/10/Nikon_D850_Sample_13.jpg');
        background-size: cover;
        display: inline-block;

    }

    .child2-hover {
        width: 50%;
        height: 400px;
        display: inline-block;
        vertical-align: top;
    }

</style>
<div class="container">
    <div class="child1">
    </div>
    <div class="child2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit enim orci. Aenean vulputate scelerisque lorem sagittis lacinia. Nunc vitae massa felis.
    </div>
</div>
<div class="container">
    <div class="child1">
    </div>
    <div class="child2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit enim orci. Aenean vulputate scelerisque lorem sagittis lacinia. Nunc vitae massa felis.
    </div>
</div>
<div class="container">
    <div class="child1">
    </div>
    <div class="child2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit enim orci. Aenean vulputate scelerisque lorem sagittis lacinia. Nunc vitae massa felis.
    </div>
</div>

<script> 
$(".container").mouseenter(function(){
     $(this)
     .find(".child1").addClass("child1-hover", 300).end()
      .find(".child1").removeClass("child1", 300).end()
      .find(".child2").addClass("child2-hover", 300).end()
      .find(".child2").removeClass("child2", 300);
})

$(".container").mouseleave(function(){
     $(this)
     .find(".child1-hover").addClass("child1", 300).end()
      .find(".child1-hover").removeClass("child1-hover", 300).end()
      .find(".child2-hover").addClass("child2", 300).end()
      .find(".child2-hover").removeClass("child2-hover", 300);
})
</script>

在版本 1 中，当您的鼠标离开网页或滚动速度过快时，类会切换，以便当您未悬停在容器 div 中时 child1-hover 是活动类。

在版本 2 中，当您的鼠标将网页离开容器 div 时，child1-hover 仍然会卡住，但至少下次您将鼠标悬停在它上面时，悬停状态权限本身。

希望其中的一部分是有道理的......

标签： jqueryhtmlcsssass

解决方案

这是纯 CSS 解决方案的绝佳机会。您可以解决问题，并且不需要相对繁重的 jQuery 方法或任何 JavaScript。我们还可以稍微简化一下代码。

因此，我从您的 JSFiddle 代码中进行了编辑。你只需要申请效果:hover。 让我告诉你（下面是整个 SCSS）：.container

.container {
  width: 100%;
  height: 50vh;
  min-height: 300px;
  display: block;
  overflow: hidden;

  .image-h2 {
    top: 50%;
    color: white;
    padding: 1px;
    margin: 0;
    text-align: center;
    position: absolute;
    width: 100%;
    display: block;
    transition: 0.3s;
  }

  &:hover .image-h2 {
    opacity: 0;
  }

  .image-card {
    background-image: url("http://www.steves-digicams.com/blog/wp-content/uploads/2017/10/Nikon_D850_Sample_13.jpg");
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
    transition: 0.3s;
  }

  &:hover .image-card {
    width: 40%;
    height: 100%;
  }

  .text-card {
    display: inline-block;
    width: 55%;
    padding-left: 1em;
    height: 100%;
    padding-bottom: 20px;
    vertical-align: middle;
  }

}

推荐阅读