登录
当前位置： 首页 > 知识库问答 >
问题：

Z索引：div不重叠？

马飞
2023-03-14

创建由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;

共有1个答案

潘佐
2023-03-14

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

问题是，您可以使用或~直接操作悬停元素之后的元素。但是，如果您需要操作之前的操作，您可以使用一点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>
 类似资料：
  • CSS-最大z索引值

    问题内容： CSS 属性是否有最大/最小值？ 不同的浏览器是否具有不同的最大/最小接受值？ 浏览器将如何处理高/低值？ 我以为我在某个地方读过一次关于最大值的书。也许我错了。 提前致谢！ 问题答案： 这些是最大值。 在网络上的某处找到了它。

  • 中心容器(&Z)索引

    我正试着对齐下面的下拉列表，但是不能让它工作。此外，我还有一个图层的问题，不幸的是下拉列表显示在下面的容器下。有人能帮帮我吗？有人有主意吗？ null null

  • Z索引不适用于绝对位置

    问题内容： 我打开控制台（chrome \ firefox）并运行以下行： 内容未包含在#popupFrame中，这使它变得很奇怪。 目标是创建像firefox这样的警告框 问题答案： 第二个div是（默认值），因此z-index不适用于它。 您需要定位（将位置属性设置为，而不是在这种情况下可能需要的其他位置）要分配给的任何内容。

  • Z索引不适用于固定定位

    问题内容： 我有一个默认位置（即）和一个位置。 如果设置元素的z索引，似乎不可能使固定元素位于静态元素之后。 我可以通过 在static元素上使用来解决此问题 ，但是有人可以告诉我 为什么会 这样吗？ （似乎有一个与此问题类似的问题，固定位置破坏了z-index，但是它没有令人满意的答案，因此我在这里用示例代码来询问） 问题答案： 这个问题可以通过多种方式解决，但实际上，了解堆叠规则可以使您找到最

  • div的Tab索引

    问题内容： 请参见下面的表单HTML代码 在这里，我以某种方式设置了协议复选框的样式，以使无线电输入完全隐藏并且将背景图像应用于包装器div，包装器div的onclick将切换背景图像以及无线电输入的检查状态。 我需要在’terms_radio’DIV上设置tabindex索引，只是div上的tabindex =“ 2”属性不起作用， 当光标位于电子邮件输入字段时，是否可以通过按TAB键使收音机输

  • IE7 Z索引分层问题

    问题内容： 我已经隔离了IE7 错误的一个小测试用例，但是不知道如何解决它。我整天都在玩。 IE7有什么问题？ 测试CSS： 测试HTML： 问题答案： Z索引不是绝对测量。 只要z-index：1000的元素位于 不同的 堆叠上下文中 ，则z-index：1000的元素可能位于z- index：1 的元素之后。 当您指定z-index时，您是相对于同一堆叠上下文中的其他元素指定它的，尽管CSS规

相关问答

Hibernate搜索不索引如何在不考虑div索引的情况下识别XPath？从多索引的子集获取索引[重复]手动重建PyCharm索引[重复]ElasticSearch重新索引原因

相关文章

我有位置，但是z索引不起作用IE 6和IE 7 Z索引问题带有前伪元素的Z索引嵌套元素的CSS Z索引问题使用D3更新SVG元素Z-索引

相关阅读

PostgreSQL 索引SQL 索引MongoDB索引MySQL索引OrientDB索引

相关工具

ZZ-BlogPHPZ-BlogZ-PushEasy Z Modal

相关文档

Smarty 模板引擎中文文档Linux 内核引导选项简介应用引擎 V2 开发文档Jade 模板引擎 中文文档HeyThings IoT 服务平台开发指引
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.