Correct way to specify HTML element to apply animation

Question

I have three divs with its correponding span children in my html page

<ul>
   <li><div><span class="spinner">A</span></div></li>
   <li><div><span>B</span></div></li>
   <li><div><span>C</span></div></li>
</ul>

and I would like for only the one who has the children span class="spinner" to actually spin when I hover over the div but I cannot accomplish such task witht the following lines:

ul li div:hover span.spinner {
    animation: spin 1s linear infinite;
}

You can see my code in JSFiddle

You mean you would like to spin the element with the class spinner right? — Aalexander, Dec 24 '20 at 14:24
Yes, just add `display:inline-block;` to the style and it should work — Alon Eitan, Dec 24 '20 at 14:24
Sorry for my poor explanation, but that is not the expected performance. I would like for the whole div to spin, not only the span. — Sergi Justiniano Claramunt, Dec 24 '20 at 19:34

score 2 · Answer 1 · answered Dec 24 '20 at 14:26

Your span.spinner needs to have display: inline-block;

here is your code with the display property

ul{
    list-style-type: none;
}

li {
    display: inline-block;
}

ul li div{
    width: 100px;
    height: 100px;
    background-color: red;
}

ul li div:hover span.spinner {
    animation: spin 1s linear infinite;
    display: inline-block;
}

@keyframes spin{
    from{ 
        transform: rotate(0deg); 
    }
    to{ 
        transform: rotate(360deg); 
    }
}

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title> Main Page </title>
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <ul>
            <li><div><span class="spinner">A</span></div></li>
            <li><div><span>B</span></div></li>
            <li><div><span>C</span></div></li>
        </ul>
    </body>
</html>

Sorry for my poor explanation, but that is not the expected performance. I would like for the whole div to spin, not only the span. — Sergi Justiniano Claramunt, Dec 24 '20 at 19:27

Correct way to specify HTML element to apply animation

1 Answers1