悬停Div会影响另一个容器中的元素

问题描述

首先感谢您查看我的代码。

我的计划是要有一个装有三张照片的容器。每张图片都是视口的大小。默认情况下，第一张和第三张图片应隐藏。将鼠标悬停在视口的上部时，第一张图片（隐藏在上方）应向下移动。将鼠标悬停在视口的下部时，第三张图片（隐藏在下方）支架向上移动。将鼠标悬停在中间部分，将显示第二张图片（默认）。

为了更好地理解此处的简短视频，该视频可以双向显示我的计划。 （https://youtu.be/zIoK9J0kmts）

如果是出于兴趣，请在此处找到视频/效果的代码。 HTML->

        <div class="slider_container">
          <div class="slide one">
            <img class="img_size" content.jpg/png">
          </div>
          <div class="slide two">
            <p>Content</p>
          </div>
        </div>

CSS->

.slider_container {
    width: 100%;
    height: 100%;
    background: black;
    position: relative;
    overflow: hidden;
}
.slider_container:hover .two {
    /* top: 0; */
    transform: translateY(0);
}
.slider_container:hover .one {
    /* top: 0; */
    transform: translateY(100%);
}
.slide {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all 1.8s /*linear*/ ease-in-out;
}

.one {
    background: green;
    transform: translateY(0);
}
.two {
    background: blue;
    );
    transform: translateY(-100%);
}

现在是我的问题： 因为我不想只悬停容器，而是将容器分为三个部分，导致不同的操作，所以我将另一个容器置于要影响的容器的前面，然后通过网格分为三个部分。然后添加第三个反应。

HTML->

  <div class="hovergrid">
    <div class="hover_t"></div>
    <div class="hover_c"></div>
    <div class="hover_b"></div>
  </div>

  <div class="slider_container">
    <div class="slide one">
      <img class="img_size" content.jpg/png">
   </div>
    <div class="slide two">
      <p>Content</p>
    </div>
    <div class="slide three">
      <p>Content</p>
    </div>
  </div>

CSS->

.slider_container {
    width: 100%;
    height: 100%;
    background: black;
    position: relative;
    overflow: hidden;
}
.slider_container:hover .one {
    transform: translateY(100%);
}
.slider_container:hover .two {
    transform: translateY(0);
}
.slider_container:hover .three {
    transform: translateY(-100%);
}
.slide {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all 1.8s /*linear*/ ease-in-out;
}

.one {
    background: green;
    transform: translateY(0);
}
.two {
    background: blue;
    );
    transform: translateY(-100%);
}

使用CSS最接近的解决方案是（Hover on div affects outside element），但是在我的情况下它不起作用，因为我有三个不同的悬停字段，并且悬停状态会相互影响。

所以我想我需要使用Javascript。到目前为止，我尝试了以下方法：

HTML->

<div class="hovergrid">
  <div class="hover_t" onmouseover="slideUp(t)" onmouseout="slideDown(t)"></div>
  <div class="hover_c" onmouseover="slideUp(c)" onmouseout="slideDown(c)"></div>
  <div class="hover_b" onmouseover="slideUp(b)" onmouseout="slideDown(b)"></div>
</div>

<div class="slider_container">
  <div class="slide" id="one"><p>Content</p></div>
  <div class="slide" id="two"><p>Content</p></div>
  <div class="slide" id="Three"><p>Content</p></div>
</div>

CSS->

.slider_container {
    width: 100vw;
    height: 100%;
    background: none;
    position: relative;
    overflow: hidden;
    z-index: 2;
}
.hovergrid {
    background: none;
    width: 100%;
    height: 100%;
    display: grid;
    position: relative;
    z-index: 3;
}
.hover_t{
}
.hover_c{
}
.hover_b{
}
#one {
    background: orange;
    transform: translateY(100%);
}
#two {
    background: red;
    transform: translateY(0);
}
#three {
    background: black;
    transform: translateY(-100%);
}

.slide {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all 1.8s linear/*ease-in-out*/;
}

JS->

var slideUp(t) = document.getElementById("two");
var slideDown(t) = document.getElementById("two");

function slideUp(t) 
    {
        document.getElementById("two").style.transform = translateY(100%);
    }
function slideDown(t) 
    {
        document.getElementById("two").style.transform = translateY(0%);
    }
...

如果您有提示，技巧或任何解决方案，我将非常高兴。

它现在已经很详细了，但是我认为最好理解。 再次感谢

解决方法

jQuery确实可以轻松解决您的问题。如果您尚未在项目中使用jquery，请随时提出一些问题

var gallery = $('.content'),height = gallery.height(),topHover = $('.top'),bottomHover = $('.bototm');

    console.log(topHover)
    console.log(bottomHover)

$('.hover').on('mouseover',function(){
    var up = $(this).is('.top');
    if (up) {
        gallery.animate({'scrollTop': '-=' + height});
        console.log(height)
    } else {
        gallery.animate({'scrollTop': '+=' + height});      
        console.log(height)  
    }
});

希望我的想法正确。在https://jsfiddle.net/generatorx5678/vfpcubey/

进行演示

还要感谢Gabriele Petrioli。我从他那里得到了主意