所以我试图在 input[type="submit"]::hover 时向标签添加动画,我不知道哪个是正确的 css 选择器,我想知道我是否可以这样做它仅使用 CSS,否则我将使用 jquery:
#thiselement {
display: block;
background-color: red;
border: none;
color: white;
height: 3rem;
width: 14rem;
border-radius: 24px;
font-weight: 500;
font-size: 18px;
font-family: Poppins, sans-serif;
align-items: center;
letter-spacing: 1px;
align-self: center;
box-shadow: none;
transition: all 0.7s ease;
}
#animatethis{
position: relative;
width: fit-content;
color: white;
left: 10px;
top: 40px;
font-size: 2rem;
}
#thiselement:hover > #animatethis{
animation: lefttoright 1s infinite;
}
@keyframes lefttoright {
0% {
left: 10px;
}
100% {
left: 30px;
}
}
<label for="submitform" id="animatethis">-</label>
<input type="submit" name="submitform" id="thiselement" value="Send Message"/>