我正在尝试制作动画作为学习练习。当我将鼠标悬停在圆上时，我想对其应用动画，并显示 .hide 元素中的文本。但是当我将鼠标悬停在圆圈上然后将鼠标移到文本上时，动画停止了。
即使我将文本悬停在 .hide 元素中，是否有办法让两个动画都继续运行？我试图为带有动画的 .hide 类创建一个 :hover 子类，试图将动画添加到 .hide 类，并同时尝试了两者，但我无法弄清楚。
此外，悬停开始时弹出的那条小黑线很烦人，如果有人知道如何摆脱它的话。
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
.circle-icon:hover {
padding: 30px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.circle-icon:hover + .hide {
display: inline-block;
background-color: gray;
width: 100px;
}
@keyframes spin {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
@keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 100px;
font-size: 100%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/7dd2bd858f.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container">
<a href="#">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
</body>
</html>最佳答案
您需要进行一些更改，我已在示例后对每一项进行了解释，但总而言之:
你遇到问题的主要原因是因为你只是在 circle-icon 上悬停 - 这意味着当你将鼠标移开它时(即使它是相关的文本) 悬停效果结束。因此，您需要将鼠标悬停在整个 链接上，而不仅仅是圆圈上。
工作示例:
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
a.icontextlink { text-decoration:none;}
.icontextlink:hover .circle-icon {
padding: 30px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.icontextlink:hover .hide {
display: inline-block;
background-color: gray;
width: 100px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 100px;
font-size: 100%;
}
}<script
src="https://kit.fontawesome.com/7dd2bd858f.js"
crossorigin="anonymous"
></script>
<div class="container">
<a href="#" class="icontextlink">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>使其工作的改变:
<强>1。向链接添加一个类，这样我们就可以将 CSS 应用于它，而不是容器中的所有 a 元素，例如
<a href="#" class="icontextlink">
<i class="fas fa-home circle-icon"></i><span class="hide">HOME</span>
</a>
<强>2。悬停整个链接时将动画添加到圆圈。为此，我们将 CSS 选择器从 .circle-icon:hover 更改为 .icontextlink:hover .circle-icon，例如:
.icontextlink:hover .circle-icon { animation-name: spin; /* etc... */ }
<强>3。当整个链接悬停时显示 hide 类 - 这意味着即使您将鼠标从圆圈移到文本上，它仍然是同一链接的一部分，因此效果没有结束。所以我们将选择器从 .circle-icon:hover + .hide 更改为 .icontextlink:hover .hide:
.icontextlink:hover .hide { display: inline-block; /* etc... */ }
<强>4。悬停时隐藏蓝线 - 您看到的蓝线是浏览器中链接的默认样式。我们可以把这个
使用 text-decoration:none; 关闭，例如
a.icontextlink { text-decoration:none;}
<强>5。修复旋转动画 仅供引用，您没有在问题中提及它，但旋转动画不起作用。这是因为您正在使用例如旋转:0deg;。正确的方法是 transform: rotate(0deg);:
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
关于html - 在悬停在两个不同元素上时应用相同的 CSS 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64248798/