时间戳

首页 > 解决方案 > 在悬停在两个不同元素上时应用相同的 CSS 动画

html - 在悬停在两个不同元素上时应用相同的 CSS 动画

问题描述

我试图制作动画作为学习的练习。当我将鼠标悬停在圆圈上时，我想对其应用动画以及.hide元素中的文本出现。但是，当我将鼠标悬停在圆圈上，然后将鼠标移到文本上时，动画就会停止。

即使我将文本悬停在.hide元素中，有没有办法让两个动画都继续进行？我尝试为带有动画:hover的类创建一个子.hide类，尝试将动画添加到.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>

标签： htmlcss

解决方案

您需要进行一些更改，我在示例之后对每一项进行了解释，但总结一下：

您遇到问题的主要原因是因为您将鼠标悬停在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.修复旋转动画仅供参考，你没有在你的问题中提到它，但旋转动画不起作用。这是因为您使用的是 eg rotate: 0deg;。正确的方法是transform: rotate(0deg);：

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

推荐阅读