个人饮食应用按钮悬停文本滑出样式问题求助

问题回顾 #

• 为实现文本从按钮内滑出的效果，设置width:0导致黑底黄边框的容器变成按钮中间的黑色竖线
• 容器在悬停前始终可见，无法像文本一样隐藏

修改后的代码 #

HTML（结构无需调整） #

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</head>

<div id="create-meal">
    <div>
        <button id="create-meal-button" class="btn">
            <svg xmlns="http://www.w3.org/2000/svg" height="50" viewBox="0 -960 960 960" width="50">
                <path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/>
            </svg>
        </button>
        <span id="create-meal-tooltip" class="bg-black p-1 rounded">Create meal</span>
    </div>
</div>

CSS（核心修复代码） #

#create-meal-button {
    background-color: #ffc107;
    border-radius: 100%;
    transition: 0.3s;
    display: inline-block; 
}
#create-meal-button:hover {
    transform: scale(1.2);
    background-color: black;
    border: solid 0.1vw #ffc107;
}
#create-meal-button > svg { width: 50px; }
#create-meal-button:hover svg { fill:#ffc107; }

#create-meal {
    text-align: center;
}

#create-meal > div {
    display: inline-block; 
}

#create-meal-tooltip {
    display: inline-block;
    white-space: nowrap;
    color: rgba(255,255,255,0);
    background-color: transparent;
    border: solid 0.1vw transparent;
    transition: all .5s ease;
    transform: translateX(-20px);
    pointer-events: none;
    opacity: 0;
}

#create-meal > div:hover #create-meal-tooltip {
    color: #ffc107;
    background-color: black;
    border-color: #ffc107;
    transform: translateX(0);
    opacity: 1;
    width: auto;
}

关键修改说明 #

• 彻底隐藏初始容器：通过opacity:0、background-color:transparent、border-color:transparent组合，让容器在悬停前完全不可见，替代仅隐藏文本颜色的方式
• 解决竖线问题：移除固定width:0，改为hover时设置width:auto自动适配文本宽度，保留transform: translateX(-20px)实现从按钮内滑出的视觉效果
• 统一过渡动画：使用transition: all .5s ease确保背景、边框、透明度、位移等所有属性都平滑过渡
• 优化图标变色逻辑：调整选择器为#create-meal-button:hover svg，确保鼠标悬停按钮区域时图标就变色，提升交互连贯性

内容的提问来源于stack exchange，提问作者Matheus Caetano Rocha