Z-Index：Div不重叠吗？

时间：2019-08-08 03:35:31

标签： javascript html css sass

创建由4个均等部分（Div）组成的目标网页。当您将鼠标悬停在某个部分上时，它的大小应该增加，而其他部分的大小会减小（高度或宽度取决于它在悬停的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;

1 个答案:

答案 0 :(得分：0)

根据您的解释，我相信这是您想要达到的效果。

问题是，您可以使用+或~直接操作悬停元素之后的元素。但是，如果您需要操纵之前的版本，则可以使用一些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全页查看摘要

相关问题
最新问题