解决盒子鼠标悬浮加边框导致里面元素位置抖动

最新推荐文章于 2024-05-06 20:52:53 发布

前端煎饼

最新推荐文章于 2024-05-06 20:52:53 发布

阅读量139

点赞数 2

分类专栏：实操-css页面布局文章标签： html 前端 css3 css

本文链接：https://blog.csdn.net/weixin_55253195/article/details/133001506

版权

实操-css页面布局专栏收录该内容

2 篇文章 1 订阅

订阅专栏

如图，在鼠标悬浮到元素上时，里面元素位置发生了抖动，很影响观感。

解决方法：
给悬浮出现边框的盒子提前加上一个透明边框，把位置先占着就可以了。

border: solid 2px transparent;

如何不想因为边框而改变原来盒子大小，可以加上一句

box-sizing: border-box;

看结果：

最后分享一下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .information{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 1200px;
    height: 1000px;
    margin: auto;
  }
  .information-list{
    display: flex;
    justify-content: space-between;
    width: 1200px;
    height: 284px;
    box-sizing: border-box;
    border: solid 2px transparent;
  }
  .information-list:hover{
    border: solid 2px #d2dae3;
  }
  .information-list-img{
    margin-left: 66px;
    height: 268px;
    margin-top: 6px;
  }
  .information-content {
    width: 714px;
  }
  .information-title{
    font-size: 18px;
    color: #333;
  }
  .time{
    font-size: 14px;
    color: #666666;
    margin-top: 28px;
  }
  .information-essay{
    margin-top: 33px;
    font-size: 14px;
    color: #666666;
  }
  .look-more{
    margin-top: 26px;
    font-size: 18px;  
  }
  .look-more>a{
    color: #1e4677;
    text-decoration: none;
  }
    </style>
</head>
<body>
    <div class="information">
        <div class="information-list">
            <img src="./images/eat.jpg" alt="" class="information-list-img">
            <div class="information-content">
                <p class="information-title">五原山岸，尽皆崩裂。种种不祥，非止一端。</p>
                <p class="time">能留下的只有哀嚎</p>
                <div class="information-essay">
                <p>张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”</p>
                <p>帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣</p>
                <p>帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。</p>
                </div>
                <p class="look-more"><a href="#">查看更多</a></p>
            </div>
        </div>
        <div class="information-list">
            <img src="./images/flower.jpg" alt="" class="information-list-img">
            <div class="information-content">
                <p class="information-title">丈八蛇矛</p>
                <p class="time">此非为偏安一隅</p>
                <div class="information-essay">
                <p>幽州太守刘焉，乃江夏竟陵人氏，汉鲁恭王之后也。当时闻得贼兵将至，召校尉邹靖计议。</p>
                <p>靖曰：“贼兵众，我兵寡，明公宜作速招军应敌。”刘焉然其说，随即出榜招募义兵。</p>
                <p>榜文行到涿县，引出涿县中一个英雄。那人不甚好读书；性宽和，寡言语，喜怒不形于色，专好结交天下豪杰；</p>
                </div>
                <p class="look-more"><a href="#">查看更多</a></p>
            </div>
        </div>
        <div class="information-list">
            <img src="./images/xiaoxin.jpg" alt="" class="information-list-img">
            <div class="information-content">
                <p class="information-title">我待赶入城去投军</p>
                <p class="time">煮酒论英雄</p>
                <div class="information-essay">
                <p>英雄露颖在今朝，一试矛兮一试刀。初出便将威力展，三分好把姓名标。</p>
                <p>贼众我寡；必出奇兵，</p>
                <p>初出便能垂伟绩，自应分鼎在孤穷。</p>
                </div>
                <p class="look-more"><a href="#">查看更多</a></p>
            </div>
        </div>      
    </div>   
</body>
</html>

分享完毕。