Hover a Div affects element within an other container

Question

first of all thanks for having a look at my code.

My Plan is to have a container with three pictures. Every Picture is the size of the viewport. The first and the third Picture should be hidden by default. When hovering the upper Part of the viewport, the first picture (hidden above) shall move down. When hovering the lower part of viewport the third Picture (hidden below) shold move up. By hovering the middle Part the second Picture (default) shall appear.

For better understanding here a short video, that show what I plan do do, but in both directions. (https://youtu.be/zIoK9J0kmts )

Here is th code to the video/effect if this is from interest. 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%);
}

Now To My problem: Because I don't want to just hover the container but split the container into three parts that lead to different actions I put an other container infront of the one I want to be affected and split by grid into three parts. Then added a third reaction.

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%);
}

the closest solution with CSS was this one, (Hover on div affects outside element ) but it doesn't work in my case, because I have three different hover fields and the Hover state influences each other.

So I guess I need to use Javascript. What I tried so far is the following:

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%);
    }
...

I would be very pleased If you have tips and tricks or any kind of solution for me.

It got quite detailed now, but I think its better so to understand right. thanks again

score 0 · Answer 1 · answered Aug 12 '20 at 11:52

Jquery could really solve your problem easily. If you haven't used jquery in your projects, feel free to ask some questions

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)  
    }
});

Hopefully, I got your idea right; DEMO at https://jsfiddle.net/generatorx5678/vfpcubey/

Also, thanks for Gabriele Petrioli. I got the idea from him

Hover a Div affects element within an other container

1 Answers1