css 一个在悬停时分割展开的转换对右边的分割不起作用

jgwigjjp 于 2023-05-19 发布在其他

关注(0)|答案(2)|浏览(132)

我试图做一个过渡，一旦你悬停在它上面，分裂就会扩大，但它对最右边的分裂不起作用，当我悬停在它上面时，它只是以一种奇怪的方式出现故障。
下面是HTML：

<div class="home grow">
  <a routerLink = "">HOME</a>
</div>
<div class="books grow">
  BOOKS
</div>
<div class="about grow">ABOUT</div>

这里是CSS：

* {
    margin: 0;
    padding: 0;
}

div {
    float: left;
    width: 33.33%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home {
    background-color: grey;
}

.books {
    background-color: lightblue;
}

.about {
    background-color: lightcyan;
}

.grow {
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
    overflow: hidden;
    transition: 1.5s;
}

.grow:hover {
    width: 90vw;
}

我遇到的另一个问题是当我展开其他的分区时，右边的分区完全消失了
我尝试通过执行以下操作为右边的元素进行特殊的转换
HTML：

<!-- modified the "About" division -->
<div class= "about grow-right">about</div>

CSS：

/* just added a random negative value the the margin to check if it works */
.grow-right:hover {
    margin-left: -80px;
}

但它没有工作，它只是留下了一个白色的空间在右边，当我悬停在它。

css

来源：https://stackoverflow.com/questions/76257812/transition-where-division-expands-on-hover-is-not-working-for-the-division-on-th

2条答案

按热度按时间

djp7away1#

这就是你想要的吗我添加了一个容器，故障消失了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        display: flex;
      }
      .container div {
        float: left;
        width: 33.33%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .home {
        background-color: grey;
      }

      .books {
        background-color: lightblue;
      }

      .about {
        background-color: lightcyan;
      }

      .grow {
        -webkit-transition: width 0.5s;
        transition: width 0.5s;
        overflow: hidden;
      }

      .grow:hover {
        width: 90vw;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="home grow">
        <a routerLink="">HOME</a>
      </div>
      <div class="books grow">BOOKS</div>
      <div class="about grow">ABOUT</div>
    </div>
  </body>
</html>

赞(0）回复(0）举报 2023-05-19

3mpgtkmj2#

试试这个，用“flex”代替“float”

* {
        margin: 0;
        padding: 0;
    }
    
    div.container {
       display: flex;
       flex-flow: row nowrap;
    }

    div.grow {
        width: 33.33%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .home {
        background-color: grey;
    }

    .books {
        background-color: lightblue;
    }

    .about {
        background-color: lightcyan;
    }

    .grow {
        -webkit-transition: width 0.5s;
        transition: width 0.5s;
        overflow: hidden;
        transition: 1.5s;
    }

    .grow:hover {
        width: 90vw;
    }

<div class="container">
<div class="home grow">
  <a routerLink = "">HOME</a>
</div>
<div class="books grow">
  BOOKS
</div>
<div class="about grow">ABOUT</div>
</div>

赞(0）回复(0）举报 2023-05-19

我来回答

css 一个在悬停时分割展开的转换对右边的分割不起作用

2条答案

相关问题

热门标签

最新问答