У меня есть параграф, который я хотел бы анимировать при наведении курсора, создавая вокруг него границу.
До сих пор я знаю, что 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;}
}
Если бы я просто анимировалбез наведения и перед псевдо-классом и элементом, например, так:1014 * Он отлично анимирует его, за исключением того факта, что мне нужен наведение, но наведение не будет работать раньше.
В этом конкретном случае у вас есть представление о том, как заставить его работать?