欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

在CSS中，當(dāng)一個元素在懸停時變大時，如何防止其他元素移動？

CSS
錢諍諍1年前9瀏覽0評論

我有一個帶有圖像的框，當(dāng)鼠標(biāo)懸停時，該框會增長以顯示文本。我遇到了所有其他頁面元素一起移動的問題。位置:絕對或固定不工作。只使用CSS有可能不移動頁面嗎？抱歉，英語有問題。

.aboutme {
  padding-top: 15%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.box {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 500px;
  margin-left: 40px;
  background: #141414;
  transition: 0.5s;
  font-family: consolas;
}

.box:hover {
  height: 400px;
}

.box .imgBx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.bio {
  background: linear-gradient(235deg, #0c0c0c, #161616);
  border-radius: 10px;
  padding: 20px;
  color: #fff;
  font-size: 20px;
  font-family: consolas;
  max-width: 40%;
}

<div class="aboutme">
  <div class="box">
    <div class="imgBx" id="aboutme">
      <img src="me.jpg">
    </div>
    <div class="content">
      <h2>Raul Souza<br><span>Computer Scientist</span></h2>
    </div>
  </div>
  <section class="bio">
    ..generic text and images..
  </section>
</div>

給定一個固定的高度。aboutme div和我添加了代碼來顯示懸停時的文本。

.aboutme {
    padding-top: 15%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height:350px;
    background-color:#fff;
    padding:25px;
}

.box {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #141414;
    transition: 0.5s;
    font-family: consolas;
}

.box:hover {
    height: 400px;
}

.box .imgBx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.content{
    display:none;
    color:white;
}

.box:hover .content{
    display:block;
}

.bio {
    background: linear-gradient(235deg, #0c0c0c, #161616);
    border-radius: 10px;
    padding: 20px;
    color: #fff;
    font-size: 20px;
    font-family: consolas;
    max-width: 40%;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="aboutme">
        <div class="box">
            <div class="imgBx" id="aboutme">
                <img src="me.jpg">
            </div>
            <div class="content">
                <h2>Raul Souza<br><span>Computer Scientist</span></h2>
            </div>
        </div>
        <section class="bio">
            ..generic text and images..
        </section>
    </div>
    </body>
</html>

您可以使用transform: scaleY(...);在你的情況下(300到400像素的高度),不是在懸停時改變高度值，而是轉(zhuǎn)換:scaleY(1.33)；：

.aboutme {
  padding-top: 15%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.box {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 500px;
  margin-left: 40px;
  background: #141414;
  transition: 0.5s;
  font-family: consolas;
}

.box:hover {
  transform: scaleY(1.33);
}

.box .imgBx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.bio {
  background: linear-gradient(235deg, #0c0c0c, #161616);
  border-radius: 10px;
  padding: 20px;
  color: #fff;
  font-size: 20px;
  font-family: consolas;
  max-width: 40%;
}

<div class="aboutme">
  <div class="box">
    <div class="imgBx" id="aboutme">
      <img src="me.jpg">
    </div>
    <div class="content">
      <h2>Raul Souza<br><span>Computer Scientist</span></h2>
    </div>
  </div>
  <section class="bio">
    ..generic text and images..
  </section>
</div>