色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

懸停時分部展開的過渡不適用于右側的分部

CSS
劉柏宏1年前7瀏覽0評論

我正在嘗試做一個過渡，當你把鼠標懸停在它上面的時候，它會展開，但是它對最右邊的部分不起作用，當我把鼠標懸停在它上面的時候，它會以一種奇怪的方式出現故障。

這是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;
}

但是它不起作用，當我懸停在它上面時，它只是在右邊留下了一個空白。

這是你想要的嗎？我添加了一個容器，故障消失了。

<!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>

試試這個，用& quotflex & quot而不是& quot浮動& quot

* {
        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>