Question

我正在尝试使用背景图像和两个梯形div（包含图像和一些文本）来制作全屏页面。而且我希望将一个梯形悬停在另一个梯形上。

我想我应该看起来像这样：

.left {
    clip-path: polygon(0 0, 70% 0, 30% 100%, 0% 100%);
}

.right {
    clip-path: polygon(70% 0, 100% 0, 100% 100%, 30% 100%);
}

问题是.right div从.left div向下推，我不知道该如何解决。

我的CSS：

.desktop { /* Display the full screen background-image */
    display:table;
    background-image: url(../img/team.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 89.4vh; /* I tried with 100% but the header 
                       and footer prevent it */
}

.left, .right { /*Hoverable zone*/
    display: table-cell;
    width: 50%;
}

.panel {
    margin-top: 25%;
    visibility: hidden;
}

.show {
    visibility: visible;
}

.showBg {
    background-color: white;
    box-shadow: 10px 0 100px 30px;
}

.panel img{
    border-radius: 50%;
    width: 30%;
}

.panel p {
    width: 50%;
    margin-left: 25%;
}

我的js文件，当我将鼠标悬停在左/右区域时可以隐藏/显示面板：

/*Hide everything*/

$(".right > .panel").removeClass("show");
$(".left > .panel").removeClass("show");

/*Show the right when hovering the left*/

$(".left").hover(function() {
    $(".right > .panel").addClass("show");
    $(".right").addClass("showBg");
}, function(){
    $(".right > .panel").removeClass("show");
    $(".right").removeClass("showBg");
});

/*Show the left when hovering the right*/

$(".right").hover(function() {
    $(".left > .panel").addClass("show");
    $(".left").addClass("showBg");
}, function(){
    $(".left > .panel").removeClass("show");
    $(".left").removeClass("showBg");
});

所以基本上。

我所拥有的：

https://i.imgur.com/q2SdZcB.jpg

我想要的是：

https://i.imgur.com/qjVevKL.jpg

全屏页面带有背景图像和悬停显示的两个梯形div

0 个答案: