javascript - Z 索引 : Divs not overlapping?

标签 javascript html css sass

创建一个由 4 个相等部分 (Divs) 组成的着陆页。当您将鼠标悬停在一个部分上时，它应该会增加尺寸，而其他部分会减小尺寸(高度或宽度取决于它在悬停的 div 中的位置。

两个问题.... 1.降低高度不起作用(减小宽度可以) 2. 当悬停在上面时，顶部的两个部分会在底部的两个部分后面展开。底部的两个部分扩展到顶部的两个部分，这是我想要的

   <div class="container">
      <section class="screen top-left">
        <h1>Jeff</h1>
        <a href="#" class="button">About</a>
      </section>

      <section class="screen top-right">
        <h1>Renee</h1>
        <a href="#" class="button">About</a>
      </section>

      <section class="screen bottom-left">
        <h1>Mike</h1>
      <a href="#" class="button">About</a>
      </section>

      <section class="screen bottom-right">
        <h1>Chris</h1>
        <a href="#" class="button">About</a>
      </section>
   </div>

@import "reset";
@import "variables";
@import "mixins";

h1 {
  font-size: 5rem;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Playfair Display', serif;
}

.button {
  display: block;
  position: absolute;
  left: 50%;
  top: 55%;
  height: 1.6rem;
  padding-top: 0.6rem;
  width: 10rem;
  text-align: center;
  color: white;
  border: 3px solid #fff;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateX(-50%);
  transition: all .2s;
}

.screen.top-left .button:hover {
  background-color: $top-left-button-hover;
  border-color: $top-left-button-hover;
}

.screen.top-right .button:hover {
  background-color: $top-right-button-hover;
  border-color: $top-right-button-hover;
}

.screen.bottom-left .button:hover {
  background-color: $bottom-left-button-hover;
  border-color: $bottom-left-button-hover;
}

.screen.bottom-right .button:hover {
  background-color: $bottom-right-button-hover;
  border-color: $bottom-right-button-hover;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: $container-bgColor;

  .screen {
    position: absolute;
    width: 50%;
    height: 50%;
    overflow: hidden;
  }
}

.screen.top-left {
  left: 0;
  background: url('../img/dog1.jpg') center center no-repeat;
  background-size: cover;

  &:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: $top-left-bgColor;
  }
}

.screen.top-right {
  right: 0;
  background: url('../img/dog2.jpg') center center no-repeat;
  background-size: cover;

  &:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: $top-right-bgColor;
  }
}

.screen.bottom-left {
  left: 0;
  bottom: 0;
  background: url('../img/dog3.jpg') center center no-repeat;
  background-size: cover;

  &:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: $bottom-left-bgColor;
  }
}

.screen.bottom-right {
  right: 0;
  bottom: 0;
  background: url('../img/dog4.jpg') center center no-repeat;
  background-size: cover;

  &:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: $bottom-right-bgColor ;
  }
}

.screen.top-left, .screen.top-right,
.screen.bottom-left, .screen.bottom-right,
.screen.top-left:before, .screen.top-right:before,
.screen.bottom-left:before, .screen.bottom-right:before {
  transition: $animateSpeed all ease-in-out;
}

// Hover top left
.hover-top-left .top-left {
  width: $hover-width;
  height: $hover-height;
}
.hover-top-left .top-right {
  width: $small-width;
}
.hover-top-left .bottom-left .bottom-right {   // no work
  height: $small-height;
}
.hover-top-left .top-right:before
.bottom-right:before .bottom-left:before {
  z-index: 2;
}

// Hover top right
.hover-top-right .top-right {
  width: $hover-width;
  height: $hover-height;
}
.hover-top-right .top-left {
  width: $small-width;
}
.hover-top-right .bottom-right .bottom-left {  // no work
  height: $small-height;
}
.hover-top-right .bottom-right:before
.bottom-left:before .top-left:before {
  z-index: 2;
}

// Hover bottom left
.hover-bottom-left .bottom-left {
  width: $hover-width;
  height: $hover-height;
}
.hover-bottom-left .bottom-right {
  width: $small-width;
}
.hover-bottom-left .top-left .top-right {
  height: $small-height;
}
.hover-bottom-left .top-right:before
.bottom-right:before .bottom-left:before {
  z-index: 2;
}

// Hover bottom right
.hover-bottom-right .bottom-right {
  width: $hover-width;
  height: $hover-height;
}
.hover-bottom-right .bottom-left {
  width: $small-width;
}
.hover-bottom-right .top-left .top-right {
  height: $small-height;
}
.hover-bottom-right .top-right:before
.top-left:before .bottom-left:before {
  z-index: 2;
}

@media(max-width: 800px) {
  h1 {
    font-size: 2rem;
  }
  .button {
    width: 12rem;
  }
}

@media(max-height: 700px) {
  .button {
    top: 70%;
  }
}

$container-bgColor: #444;

$top-left-bgColor: rgba(255, 122, 105, 0.7);
$top-left-button-hover: rgba(255, 122, 105, 0.6);

$top-right-bgColor: rgba(177, 118, 222, 0.7);
$top-right-button-hover: rgba(177, 118, 222, 0.6);

$bottom-left-bgColor: rgba(142, 204, 245, 0.7);
$bottom-left-button-hover: rgba(142, 204, 245, 0.6);

$bottom-right-bgColor: rgba(118, 222, 138, 0.7);
$bottom-right-button-hover: rgba(118, 222, 138, 0.6);

$hover-width: 75%;
$hover-height: 75%;
$small-width: 25%;
$small-height: 25%;
$animateSpeed: 1000ms;

最佳答案

从你的解释来看，我相信这是你想要达到的效果。

关键是您可以使用 + 或 ~ 直接操作悬停元素之后的元素。但是如果您需要操作前面的那些，您可以使用一些 JS。

所以我的解决方案就是这样做的，在适用的地方只使用 CSS，在需要的地方使用 JS。

希望这对您有所帮助。

干杯

      $(document).ready(function(){
        //    top-right hover
        $('.top-right').mouseover(function(){
        $('.top-left').addClass('shrink-left');
        });
        $('.top-right').mouseout(function(){
        $('.top-left').removeClass('shrink-left');
        });

        //  bottom elements hover
        $('.bottom-right').mouseover(function(){
        $('.top-left, .top-right').addClass('shrink-up');
        $('.bottom-left').addClass('shrink-left');
        });
        $('.bottom-right').mouseout(function(){
        $('.top-left, .top-right').removeClass('shrink-up');
        $('.bottom-left').removeClass('shrink-left');
        });

        $('.bottom-left').mouseover(function(){
        $('.top-left, .top-right').addClass('shrink-up');
        });
        $('.bottom-left').mouseout(function(){
        $('.top-left, .top-right').removeClass('shrink-up');
        });
       });
            h1 {
  font-size: 5rem;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Playfair Display', serif;
}

.button {
  display: block;
  position: absolute;
  left: 50%;
  top: 55%;
  height: 1.6rem;
  padding-top: 0.6rem;
  width: 10rem;
  text-align: center;
  color: white;
  border: 3px solid #fff;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateX(-50%);
  transition: all .2s;
}

.screen.top-left .button:hover {
  background-color: rgba(255, 122, 105, 0.6);
  border-color: rgba(255, 122, 105, 0.6);
}

.screen.top-right .button:hover {
  background-color: rgba(177, 118, 222, 0.6);
  border-color: rgba(177, 118, 222, 0.6);
}

.screen.bottom-left .button:hover {
  background-color: rgba(142, 204, 245, 0.6);
  border-color: rgba(142, 204, 245, 0.6);
}

.screen.bottom-right .button:hover {
  background-color: rgba(118, 222, 138, 0.6);
  border-color: rgba(118, 222, 138, 0.6);
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #444;
}
  .screen {
    position: absolute;
    width: 50%;
    height: 50%;
    overflow: hidden;
  }


.screen.top-left {
  left: 0;
  background: url('../img/dog1.jpg') center center no-repeat;
  background-size: cover;
}
  .screen.top-left:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(255, 122, 105, 0.7);
  }


.screen.top-right {
  right: 0;
  background: url('../img/dog2.jpg') center center no-repeat;
  background-size: cover;
}
  .screen.top-right:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(177, 118, 222, 0.7);
  }


.screen.bottom-left {
  left: 0;
  bottom: 0;
  background: url('../img/dog3.jpg') center center no-repeat;
  background-size: cover;
}
  .screen.bottom-left:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(142, 204, 245, 0.7);
}

.screen.bottom-right {
  right: 0;
  bottom: 0;
  background: url('../img/dog4.jpg') center center no-repeat;
  background-size: cover;
}
  .screen.bottom-right:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(118, 222, 138, 0.7) ;
  }


.screen.top-left, .screen.top-right,
.screen.bottom-left, .screen.bottom-right,
.screen.top-left:before, .screen.top-right:before,
.screen.bottom-left:before, .screen.bottom-right:before {
  transition: 1000ms all ease-in-out;
}


/* Pure CSS Effects  */

.top-left:hover {
  width: 75%;
  height: 75%;
  z-index: 100;

}
.top-left:hover + .top-right {
  width: 25%;
  height: 75%;
}
.top-left:hover ~ .bottom-left, 
.top-left:hover ~ .bottom-right{ 
  height: 25%;
}
.top-left:hover + .top-right:before, 
.top-left:hover ~ .bottom-right:before, 
.top-left:hover ~ .bottom-left:before {
  z-index: 99;
}

.top-right:hover  {
  width: 75%;
  height: 75%;
  z-index: 100;
}
.top-right:hover + .top-left {
  width: 25%;
}
.top-right:hover ~ .bottom-right, 
.top-right:hover + .bottom-left { 
  height: 25%;
}
.top-right:hover ~ .bottom-right:before, 
.top-right:hover + .bottom-left:before{
  z-index: 99;
}

.bottom-left:hover {
  width: 75%;
  height: 75%;
  z-index: 100;
}
.bottom-left:hover + .bottom-right {
  width: 25%;
  height: 75%;
}


.bottom-right:hover {
  width: 75%;
  height: 75%;
  z-index: 100;
}

/* Added for JS styling */
.shrink-left{
    height: 75%;
    width: 25%;
    z-index: 99;
}
.shrink-up{
    height: 25%;
    z-index: 99;
}
.shrink-left.top-left::before, 
.shrink-up.top-left::before, 
.shrink-up.top-right:before,
.shrink-left.bottom-left:before{
    z-index: 99;
}


.container{
    width: 100vw;
    height: 100vh;
    position: relative;

}


@media(max-width: 800px) {
  h1 {
    font-size: 2rem;
  }
  .button {
    width: 12rem;
  }
}

@media(max-height: 700px) {
  .button {
    top: 70%;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="container">
            <section class="screen top-left">
              <h1>Jeff</h1>
              <a href="#" class="button">About</a>
            </section>
      
            <section class="screen top-right">
              <h1>Renee</h1>
              <a href="#" class="button">About</a>
            </section>
      
            <section class="screen bottom-left">
              <h1>Mike</h1>
            <a href="#" class="button">About</a>
            </section>
      
            <section class="screen bottom-right">
              <h1>Chris</h1>
              <a href="#" class="button">About</a>
            </section>
         </div>

PS 在整页中查看片段

关于javascript - Z 索引 : Divs not overlapping?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57404844/

上一篇：html - 在 HTML/CSS 网站上显示复制/粘贴的 Arduino 代码

下一篇：html - 字体不会在服务器上加载

相关文章：

javascript - JavaScript 中的位移

c# - 用 html 标签包围 Eval

javascript - 如何在不调用任何 CSS 的情况下从内容中隐藏特定文本？

javascript - 在水平和垂直滚动时固定头部

Javascript 事件针对列表项而不是其元素

javascript - 如何使用 react js 添加平滑滚动返回顶部按钮？

javascript - 为 Magento 缩小 CSS 和 JS

css - Twitter Bootstrap - 带行跨度的表 strip 化

javascript - Scrollify.js 在当前部分添加类

html - 用于 ie8 媒体查询支持的 modernizr

©2024 IT工具网  联系我们