我正试图为我的个人饮食应用程序项目创建这个很酷的按钮--当鼠标悬停时，一个按钮会从右边滑出一个小文本.快完成了，只有一个问题我解决不了:我不希望文本漂浮在周围，我希望它出现在一个黑色背景和黄色边框的框中……但我的文本宽度为0，以便在按钮内部开始动画，所以我想要的黑框只是按钮中间的一条黑色垂直线-而且，黑框始终可见，而不是像鼠标悬停之前的文本那样透明. 我只是不能让它工作--我试着增加宽度，将文本包围在容器中，设置它们的样式--它所做的只是改变了问题.救命！
#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 > svg:hover { fill:#ffc107; }
#create-meal {
text-align: center;
}
#create-meal > div {
display: inline-block;
}
span {
display: inline-block; /* inline-block so width can be set */
width: 0;
white-space: nowrap; /* keep text in one line */
direction: ltr; /* overflow direction */
color: rgba(255,255,255,0); /* text transparency before hover */
transition: .5s;
transform: translateX(-20px); /* distance the text will move on hover */
pointer-events: none;
}
#create-meal > div:hover span {
color: #ffc107;
border: solid 0.1vw #ffc107;
transform: translateX(0);
}<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>