如何在Flex侧边栏hover展开时保持图片居中并显示动态标签

问题 #

制作侧边导航栏，初始仅显示图标；鼠标悬停时展开显示对应标签。目前展开时图标会向右偏移，希望图标始终保持在侧边栏居中位置，标签在图标右侧显示。

解决思路 #

核心是让图标所在容器固定宽度（与侧边栏最小宽度一致），使图标在容器内居中；同时将标签绝对定位到容器外侧，这样展开时标签的出现不会影响图标的位置。另外用CSS伪类代替JS控制显示隐藏，代码更简洁。

修改后的完整代码 #

<!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>Sidebar</title>
    
    <style>
        *{padding: 0px;margin: 0px;box-sizing: border-box;}
        body{position:relative;height: 100vh;width: 100vw;}
        .container{position: relative;height:100%;width: 100%;display: flex;flex-direction: column;}
        .topcontainer{position: relative;width:100%;height: 75px;background-color: aqua;}
        .bottomcontainer{position: relative;width: 100%;height: 30px;border:1px solid salmon;}
        .middlecontainer{position: relative;width: 100%;height: auto;flex-grow: 1;border: 1px solid black;display: flex;}
        .rightsidenavbar{position: relative;width:auto;min-width: 75px;height:99%;border: 1px solid blue;display: flex;flex-direction: column;justify-content:flex-start;align-items: center;gap:10px;transition: width 0.2s ease;}
        .servicescontaienrtab{position: relative;min-width: 75px;height: auto;display: flex;justify-content:center;align-items: center;min-height: 40px;}
        /* 固定容器宽度，确保图片居中 */
        .servicetabinnerCont{position:relative;width:75px;height: auto;display: flex;justify-content: center;align-items: center;}
        img{height:35px; width: 35px;}
        /* 标签绝对定位到容器右侧，默认隐藏 */
        .lableCls{position:absolute;left:75px;white-space:nowrap;opacity:0;visibility:hidden;transition: all 0.2s ease;}
        /* 鼠标悬停时显示标签 */
        .rightsidenavbar:hover .lableCls{opacity:1;visibility:visible;}
        .mainservicecontainer{position:relative;height:99%;flex-grow: 1;width:80%;border:1px solid yellow;}
    </style>
</head>
<body>
    <div class="container">
        <div class="topcontainer">
        </div>
        <div class="middlecontainer">
            <div class="rightsidenavbar">
                <div class="servicescontaienrtab">
                    <div class="servicetabinnerCont">
                        <img src="https://cdn-icons-png.flaticon.com/128/7910/7910833.png" alt="imagesrc not loaded">
                        <label for="" class="lableCls">Free Service</label>
                    </div>
                </div>
                <div class="servicescontaienrtab">
                    <div class="servicetabinnerCont">
                        <img src="https://cdn-icons-png.flaticon.com/128/7910/7910868.png" alt="imagesrc not loaded">
                        <label for="" class="lableCls">Shopping girl</label>
                    </div>
                </div>
            </div>
            <div class="mainservicecontainer"></div>
        </div>
        <div class="bottomcontainer">
        </div>
    </div>
</body>
</html>

关键修改说明 #

• .servicetabinnerCont设置固定宽度75px（与侧边栏min-width一致），通过justify-content:center让图片始终在容器内居中，不受标签影响。
• .lableCls设置position:absolute并偏移left:75px，将标签放到图标容器的右侧外侧，white-space:nowrap避免标签换行。
• 用opacity+visibility代替display:none，配合transition实现平滑的显示/隐藏过渡，提升交互体验。
• 移除了JS事件监听，改用CSS hover伪类控制标签显示，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者rajesh