首先感谢您查看我的代码。
我的计划是要有一个装有三张照片的容器。每张图片都是视口的大小。默认情况下,第一张和第三张图片应隐藏。将鼠标悬停在视口的上部时,第一张图片(隐藏在上方)应向下移动。将鼠标悬停在视口的下部时,第三张图片(隐藏在下方)支架向上移动。将鼠标悬停在中间部分,将显示第二张图片(默认)。
为了更好地理解此处的简短视频,该视频可以双向显示我的计划。 (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%);
}
...
如果您有提示,技巧或任何解决方案,我将非常高兴。
它现在已经很详细了,但是我认为最好理解。 再次感谢
答案 0 :(得分: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。我从他那里得到了主意