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

Question

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

我的计划是有一个包含三张图片的容器。每张图片都是视口的大小。默认情况下，第一张和第三张图片应该是隐藏的。当悬停在视口的上部时，第一张图片（隐藏在上方）将向下移动。当悬停在视口的下部时，第三张图片（隐藏在下面）会向上移动。通过将鼠标悬停在中间部分，将出现第二张图片（默认）。

为了更好地理解这里的一个简短视频，它展示了我计划做的事情，但是是双向的。 (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%);
    }
...

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

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

Answer 1

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。我从他那里得到了主意