如何在CSS中实现鼠标悬停时防止元素变大时影响其他元素的位置？

huangapple
go评论97阅读模式
英文:

How can I prevent other elements from moving when an element grows in size on hover in CSS?

问题

  1. <!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
  3. <!-- 语言：lang-css -->
  5.     .aboutme {
  6.       padding-top: 15%;
  7.       display: flex;
  8.       justify-content: space-around;
  9.       align-items: flex-end;
  10.     }
  12.     .box {
  13.       position: relative;
  14.       width: 300px;
  15.       height: 300px;
  16.       display: flex;
  17.       justify-content: center;
  18.       align-items: center;
  19.       margin-top: 500px;
  20.       margin-left: 40px;
  21.       background: #141414;
  22.       transition: 0.5s;
  23.       font-family: consolas;
  24.     }
  26.     .box:hover {
  27.       height: 400px;
  28.     }
  30.     .box .imgBx {
  31.       position: absolute;
  32.       top: 0;
  33.       left: 0;
  34.       width: 100%;
  35.       height: 100%;
  36.       padding: 10px;
  37.       box-sizing: border-box;
  38.     }
  40.     .bio {
  41.       background: linear-gradient(235deg, #0c0c0c, #161616);
  42.       border-radius: 10px;
  43.       padding: 20px;
  44.       color: #fff;
  45.       font-size: 20px;
  46.       font-family: consolas;
  47.       max-width: 40%;
  48.     }
  50. <!-- 语言：lang-html -->
  52.     <div class="aboutme">
  53.       <div class="box">
  54.         <div class="imgBx" id="aboutme">
  55.           <img src="me.jpg">
  56.         </div>
  57.         <div class="content">
  58.           <h2>Raul Souza<br><span>计算机科学家</span></h2>
  59.         </div>
  60.       </div>
  61.       <section class="bio">
  62.         ..通用文本和图像..
  63.       </section>
  64.     </div>
  66. <!-- 结束代码片段 -->
英文:

I have this box with a image and when mouse hover, the box grows to show a text. I'm having troubles with all other page elements moving together. position: absolute or fixed don't work. Is it possible to not move the page using only CSS? Sorry for english troubles.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .aboutme {
  2.   padding-top: 15%;
  3.   display: flex;
  4.   justify-content: space-around;
  5.   align-items: flex-end;
  6. }
  8. .box {
  9.   position: relative;
  10.   width: 300px;
  11.   height: 300px;
  12.   display: flex;
  13.   justify-content: center;
  14.   align-items: center;
  15.   margin-top: 500px;
  16.   margin-left: 40px;
  17.   background: #141414;
  18.   transition: 0.5s;
  19.   font-family: consolas;
  20. }
  22. .box:hover {
  23.   height: 400px;
  24. }
  26. .box .imgBx {
  27.   position: absolute;
  28.   top: 0;
  29.   left: 0;
  30.   width: 100%;
  31.   height: 100%;
  32.   padding: 10px;
  33.   box-sizing: border-box;
  34. }
  36. .bio {
  37.   background: linear-gradient(235deg, #0c0c0c, #161616);
  38.   border-radius: 10px;
  39.   padding: 20px;
  40.   color: #fff;
  41.   font-size: 20px;
  42.   font-family: consolas;
  43.   max-width: 40%;
  44. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;aboutme&quot;&gt;
  2.   &lt;div class=&quot;box&quot;&gt;
  3.     &lt;div class=&quot;imgBx&quot; id=&quot;aboutme&quot;&gt;
  4.       &lt;img src=&quot;me.jpg&quot;&gt;
  5.     &lt;/div&gt;
  6.     &lt;div class=&quot;content&quot;&gt;
  7.       &lt;h2&gt;Raul Souza&lt;br&gt;&lt;span&gt;Computer Scientist&lt;/span&gt;&lt;/h2&gt;
  8.     &lt;/div&gt;
  9.   &lt;/div&gt;
  10.   &lt;section class=&quot;bio&quot;&gt;
  11.     ..generic text and images..
  12.   &lt;/section&gt;
  13. &lt;/div&gt;

<!-- end snippet -->

prints:
before move
and
after move

答案1

得分: 0

给.aboutme div固定高度并添加了悬停时显示文本的代码。

  1.     .aboutme {
  2.         height: 350px;
  3.     }
  5.     .box:hover {
  6.         height: 400px;
  7.     }
  1.             <div class="aboutme">
  2.                 <div class="box">
  3.                     <div class="imgBx" id="aboutme">
  4.                         <img src="me.jpg">
  5.                     </div>
  6.                     <div class="content">
  7.                         <h2>Raul Souza<br><span>Computer Scientist</span></h2>
  8.                     </div>
  9.                 </div>
  10.                 <section class="bio">
  11.                     ..通用文本和图像..
  12.                 </section>
  13.             </div>
英文:

Give a fixed height to the .aboutme div and I added code to show the text on hover.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .aboutme {
  2.     padding-top: 15%;
  3.     display: flex;
  4.     justify-content: space-between;
  5.     align-items: center;
  6.     height:350px;
  7.     background-color:#fff;
  8.     padding:25px;
  9. }
  11. .box {
  12.     position: relative;
  13.     width: 300px;
  14.     height: 300px;
  15.     display: flex;
  16.     justify-content: center;
  17.     align-items: center;
  18.     background: #141414;
  19.     transition: 0.5s;
  20.     font-family: consolas;
  21. }
  23. .box:hover {
  24.     height: 400px;
  25. }
  27. .box .imgBx {
  28.     position: absolute;
  29.     top: 0;
  30.     left: 0;
  31.     width: 100%;
  32.     height: 100%;
  33.     padding: 10px;
  34.     box-sizing: border-box;
  35. }
  37. .content{
  38.     display:none;
  39.     color:white;
  40. }
  42. .box:hover .content{
  43.     display:block;
  44. }
  46. .bio {
  47.     background: linear-gradient(235deg, #0c0c0c, #161616);
  48.     border-radius: 10px;
  49.     padding: 20px;
  50.     color: #fff;
  51.     font-size: 20px;
  52.     font-family: consolas;
  53.     max-width: 40%;
  54. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3.     &lt;head&gt;
  4.         &lt;title&gt;Page Title&lt;/title&gt;
  5.     &lt;/head&gt;
  6.     &lt;body&gt;
  7.         &lt;div class=&quot;aboutme&quot;&gt;
  8.         &lt;div class=&quot;box&quot;&gt;
  9.             &lt;div class=&quot;imgBx&quot; id=&quot;aboutme&quot;&gt;
  10.                 &lt;img src=&quot;me.jpg&quot;&gt;
  11.             &lt;/div&gt;
  12.             &lt;div class=&quot;content&quot;&gt;
  13.                 &lt;h2&gt;Raul Souza&lt;br&gt;&lt;span&gt;Computer Scientist&lt;/span&gt;&lt;/h2&gt;
  14.             &lt;/div&gt;
  15.         &lt;/div&gt;
  16.         &lt;section class=&quot;bio&quot;&gt;
  17.             ..generic text and images..
  18.         &lt;/section&gt;
  19.     &lt;/div&gt;
  20.     &lt;/body&gt;
  21. &lt;/html&gt;

<!-- end snippet -->

答案2

得分: 0

You can use transform: scaleY(...); instead of changing the height value on hover, in your case (300 to 400px height) that would be transform: scaleY(1.33);:

  1. .aboutme {
  2.   padding-top: 15%;
  3.   display: flex;
  4.   justify-content: space-around;
  5.   align-items: flex-end;
  6. }
  8. .box {
  9.   position: relative;
  10.   width: 300px;
  11.   height: 300px;
  12.   display: flex;
  13.   justify-content: center;
  14.   align-items: center;
  15.   margin-top: 500px;
  16.   margin-left: 40px;
  17.   background: #141414;
  18.   transition: 0.5s;
  19.   font-family: consolas;
  20. }
  22. .box:hover {
  23.   transform: scaleY(1.33);
  24. }
  26. .box .imgBx {
  27.   position: absolute;
  28.   top: 0;
  29.   left: 0;
  30.   width: 100%;
  31.   height: 100%;
  32.   padding: 10px;
  33.   box-sizing: border-box;
  34. }
  36. .bio {
  37.   background: linear-gradient(235deg, #0c0c0c, #161616);
  38.   border-radius: 10px;
  39.   padding: 20px;
  40.   color: #fff;
  41.   font-size: 20px;
  42.   font-family: consolas;
  43.   max-width: 40%;
  44. }
  1. <div class="aboutme">
  2.   <div class="box">
  3.     <div class="imgBx" id="aboutme">
  4.       <img src="me.jpg">
  5.     </div>
  6.     <div class="content">
  7.       <h2>Raul Souza<br><span>Computer Scientist</span></h2>
  8.     </div>
  9.   </div>
  10.   <section class="bio">
  11.     ..generic text and images..
  12.   </section>
  13. </div>
英文:

You can use transform: scaleY(...); instead of changing the height value on hover, in your case (300 to 400px height) that would be transform: scaleY(1.33);:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .aboutme {
  2.   padding-top: 15%;
  3.   display: flex;
  4.   justify-content: space-around;
  5.   align-items: flex-end;
  6. }
  8. .box {
  9.   position: relative;
  10.   width: 300px;
  11.   height: 300px;
  12.   display: flex;
  13.   justify-content: center;
  14.   align-items: center;
  15.   margin-top: 500px;
  16.   margin-left: 40px;
  17.   background: #141414;
  18.   transition: 0.5s;
  19.   font-family: consolas;
  20. }
  22. .box:hover {
  23.   transform: scaleY(1.33);
  24. }
  26. .box .imgBx {
  27.   position: absolute;
  28.   top: 0;
  29.   left: 0;
  30.   width: 100%;
  31.   height: 100%;
  32.   padding: 10px;
  33.   box-sizing: border-box;
  34. }
  36. .bio {
  37.   background: linear-gradient(235deg, #0c0c0c, #161616);
  38.   border-radius: 10px;
  39.   padding: 20px;
  40.   color: #fff;
  41.   font-size: 20px;
  42.   font-family: consolas;
  43.   max-width: 40%;
  44. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;aboutme&quot;&gt;
  2.   &lt;div class=&quot;box&quot;&gt;
  3.     &lt;div class=&quot;imgBx&quot; id=&quot;aboutme&quot;&gt;
  4.       &lt;img src=&quot;me.jpg&quot;&gt;
  5.     &lt;/div&gt;
  6.     &lt;div class=&quot;content&quot;&gt;
  7.       &lt;h2&gt;Raul Souza&lt;br&gt;&lt;span&gt;Computer Scientist&lt;/span&gt;&lt;/h2&gt;
  8.     &lt;/div&gt;
  9.   &lt;/div&gt;
  10.   &lt;section class=&quot;bio&quot;&gt;
  11.     ..generic text and images..
  12.   &lt;/section&gt;
  13. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月25日 23:23:37
  • 转载请务必保留本文链接：https://go.coder-hub.com/76333930.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定