Question

我有一个段落想为悬停设置动画，在其周围创建边框。

到目前为止，我知道nth-child的定义正确，但是我想不出一种将悬停和之前所有元素组合在一起的方法。它将仅与第一个（.spanniard span：hover :: before）一起使用，而其他都不起作用。

欢迎任何想法，包括通过攻击@keyframe元素并忘记span：nth-child（n）来解决问题。

这是我的HTML：

    <!DOCTYPE html>
    <html>
     <head>
       <link rel="stylesheet" type="text/css" href="./animate.css">
     </head>
     <body>
      <div class=spanniard>
       <p class=movement id="ache-uno" onmouseover="secularum()" 
          onmouseout="seculosa()">TEST</p>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <p class=background id="background">BACKGROUND</p>
      </div>
     </body>
    <script type="text/javascript" src="animate.js"></script>
   </html>

这是我的CSS：

   .background {
     width: 300px;
     height: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .background:hover::before {
     content: '';
     position: absolute;
     width: 250px;
     height: 50px;
     border-radius: 0.5rem;
     display: flex;
     top: 80px;
     align-items: flex-start;
   }

   span {
     position: absolute;
     width: 250px;
     height: 50px;
     border-radius: 0.5rem;
     display: flex;
     justify-content: center;
     align-items: flex-start;
   }

   .spanniard span:hover::before {
     content: '';
     position: absolute;
     margin-left: 25px;
     width: 250px;
     height: 50px;
     border-radius: 0.5rem;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     -webkit-animation-name: animatron;
     -moz-animation-name: animatron;
     animation-name: animatron;
     -webkit-animation-duration: 0.5s;
     -moz-animation-duration: 0.5s;
     animation-duration: 0.5s;
     -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
   }

   .spanniard span:nth-child(2):hover::before {
     content: '';
     position: absolute;
     margin-left: 25px;
     width: 250px;
     height: 50px;
     border-radius: 0.5rem;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     -webkit-animation-name: animatron2;
     -moz-animation-name: animatron2;
     animation-name: animatron2;
     -webkit-animation-delay: 0.3s;
     -moz-animation-delay: 0.3s;
     animation-delay: 0.3s;
     -webkit-animation-duration: 0.5s;
     -moz-animation-duration: 0.5s;
     animation-duration: 0.5s;
     -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
   }

   .spanniard span:nth-child(3):hover::before {
     content: '';
     position: absolute;
     margin-left: 25px;
     width: 250px;
     height: 50px;
     border-radius: 0.5rem;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     -webkit-animation-name: animatron3;
     -moz-animation-name: animatron3;
     animation-name: animatron3;
     -webkit-animation-delay: 0.6s;
     -moz-animation-delay: 0.6s;
     animation-delay: 0.6s;
     -webkit-animation-duration: 0.5s;
     -moz-animation-duration: 0.5s;
     animation-duration: 0.5s;
     -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
   }

   .spanniard span:nth-child(4):hover::before {
     content: '';
     position: absolute;
     margin-left: 25px;
     width: 250px;
     height: 50px;
     border-radius: 0.5rem;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     -webkit-animation-name: animatron4;
     -moz-animation-name: animatron4;
     animation-name: animatron4;
     -webkit-animation-delay: 0.9s;
     -moz-animation-delay: 0.9s;
     animation-delay: 0.9s;
     -webkit-animation-duration: 0.5s;
     -moz-animation-duration: 0.5s;
     animation-duration: 0.5s;
     -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
   }

   @keyframes animatron {
     0% {background: blue; height: 2px; background-position: inherit;
         z-index: -1; display: flex; align-items: flex-start;
         transform: scale(0); transform-origin: left;}
     100% {background: blue; height: 2px; background-position: inherit;
          z-index: -1; display: flex; align-items: flex-start;
          transform: scale(1); transform-origin: left;}
   }

   @keyframes animatron2 {
     0% {background: blue; width: 2px; left: 256px; background-position:
         inherit; z-index: -1; display: flex; align-items: flex-start;
         transform: scale(0); transform-origin: top;}
     100% {background: blue; width: 2px; left: 256px; background-position: 
          inherit; z-index: -1; display: flex; align-items: flex-start; 
          transform: scale(1); transform-origin: top;}
   }

   @keyframes animatron3 {
     0% {background: red; height: 2px; top: 132px; background-position: 
          inherit; z-index: -1; display: flex; align-items: flex-end; 
          transform: scale(0); transform-origin: right;}
     100% {background: red; height: 2px; top: 132px; background-position: 
          inherit; z-index: -1; display: flex; align-items: flex-end; 
          transform: scale(1); transform-origin: right;}
   }

   @keyframes animatron4 {
     0% {background: red; width: 2px; left: 8px; background-position: 
          inherit; z-index: -1; display: flex; align-items: flex-end; 
          transform: scale(0); transform-origin: bottom;}
     100% {background: red; width: 2px; left: 8px; background-position: 
          inherit; z-index: -1; display: flex; align-items: flex-end; 
          transform: scale(1); transform-origin: bottom;}
   }

如果我要在没有悬停的情况下并且在伪类和元素之前进行动画处理，如下所示： .spanniard跨度 .spanniard span：nth-child（2） .spanniard span：nth-child（3） .spanniard span：nth-child（4）

它动画效果非常好，除了我需要悬停这一事实外，但悬停将无法工作。

对于这种特定情况，您是否知道如何使它起作用？

Answer 1

不确定您要寻找的是什么，但是可以尝试使用1到4的每个范围

.spanniard:hover span:nth-of-type(1)::before {

}

如何结合nth-child悬停和之前

1 个答案: