html+css右下导航控件

以下是我的代码和运行截图，但是运行结果有些问题，鼠标悬停二维码图标弹出具体二维码气泡的同时会拉长原来的按钮框，请问应该怎么改啊

img

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
气泡控件4-右下导航
</title>
<style type="text/css">
.fixed-btn {
    position: fixed;
    right: 1%;
    bottom: 5%;
    width: 40px;
    border: 1px solid #eee;
    background-color: white;
    font-size: 24px;
    z-index: 1040;
}
.fixed-btn a {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
}
.fixed-btn .writer {
    background-color: #96b97d;
    font-size: 18px;
    color: white;
}
.fixed-btn .img {
    padding: 2px;
    width: 30px;
    height: 30px;
}
.qrcode{
    display: none;
    position: relative;
    width: 180px;
    height: 150px;
    right:210px;
    bottom:110px;
    color: #fff;
    line-height: 50px;
    text-align: center;
    border: 1px solid grey;
    border-radius: 5px;
    background: white;
}
.arrow{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    /* 箭头靠右边 */
    top: 60px;
    right: -10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid grey;
}
.fixed-btn  a:hover .qrcode{
    display: block; 
}
.qrcode img{
    width: 150px;
}
</style>
</head>
<body>
<div class="fixed-btn">
    <a href="javascript:void(0)" title="返回顶部"><img class="img" src="顶部.png"></a>
    <a href="javascript:void(0)" title="关注我们"><img class="img" src="二维码.png">
    <div class="qrcode">
         <div class="arrow"></div>
         <img src="二维码.png" alt="" >
    </div>
    </a>
    <a class="writer" href="javascript:void(0)" title="标记/收藏"><img class="img" src="收藏.png"></a>
    
</div>
  </body>
</html>

源于chatGPT仅供参考

要解决鼠标悬停二维码图标弹出具体二维码气泡时拉长原来的按钮框的问题，您可以尝试以下修改：

1. 调整HTML结构：将二维码气泡（class="qrcode"）元素放在一个独立的div中，并将其设置为绝对定位，而不是相对于父元素的位置。这样可以避免影响原来按钮框的大小。

   ```html
   <a href="javascript:void(0)" title="关注我们">
       <img class="img" src="二维码.png">
   </a>
   <div class="qrcode">
       <div class="arrow"></div>
       <img src="二维码.png" alt="">
   </div>

  1. 更新CSS样式：针对.qrcode类的样式，调整right和bottom属性的值，以使其相对于按钮位置正确显示。还可以通过设置overflow属性为hidden来隐藏溢出的内容。

    .qrcode {
   display: none;
   position: absolute;
   width: 180px;
   height: 150px;
   right: -200px; /*根据需要调整距离右侧的距离*/
   bottom: 50px; /*根据需要调整距离底部的距离*/
   color: #fff;
   line-height: 50px;
   text-align: center;
   border: 1px solid grey;
   border-radius: 5px;
   background: white;
   overflow: hidden;
}

这样修改后，二维码气泡将相对于按钮进行定位，并且不会影响原来按钮框的大小。请根据需要调整距离右侧和底部的值，以获得预期的位置效果。

```