hover is NOT effective

[phppup]

I'll skip the boring details and get to it.

This CSS code runs an animation for an INFINITE period.

I want it to ONLY run "on mouse over" or the equivalent. I've changed the duration without issue, but cannot get it to run when desired

.obj {
  height: 90vmin;
  position: relative;
  width: 90vmin;
  
  > div {
    animation: growAndFade 3s infinite ease-out;
    /* lots of settings */
  }
  }

I've tried different variations of using

.obj :hover{
  height: 90vmin;
  position: relative;
  width: 90vmin;
  
  > div :hover{
    animation: growAndFade 3s infinite ease-out;
    /* lots of settings */
  }
  }

but seem to be missing the correct implementation.

Helpful responses, please.

Edited October 15, 2023 by phppup
Typos

[requinix]

.obj :hover > div :hover

That will target an .obj with a descendant-element you are hovering over which contains a DIV with another descendant-element you are hovering over. In other words, your HTML has to be something like

<A class="obj">
  <B>
    <div>
      <C>
        <!-- hovering here -->
      </C>
    </div>
  </B>
</A>

I doubt that's what you want.

:hover isn't cinnamon, so you can't sprinkle it over miscellaneous elements and expect them to taste better.

If you want the animation to play while hovering over the DIV then apply :hover directly to it alone - while also remembering that whitespace in CSS is occasionally significant.

.obj > div:hover

 

[phppup]

@requinix Yes, I believe I tried that initially.  It may have worked; but then it didn't.

After hours of futile efforts, I decided to post here and wait for a reply.

However, it was a Sunday afternoon and ALL my sports teams were losing. *another season of tears* LOL

My tenacity got the better of me and deeper down the rabbit hole I went.

I haven't come up with an adequate solution (and may never do so) since this was supposed to be just a 15- minute cosmetic effect.

However, I wanted to do my part as a contributor to the forum and share what I discovered:

It appears, per a variety of resources that 

Quote

@keyframes is not as easy as you might think to “restart”.

...say you set it to run once

You might think CSS provides a way to kick it off again, but ....it doesn’t. 

There seem to be several JavaScript/jQuery work-arounds or some CSS tricks to enable a smooth usefulness on every instance of an event-type.

For now, I think I've taken it as far as I am willing to go.

But the next person should be aware that events and CSS animations are not necessarily  completely compatible under the current rules that govern them.

Edited October 16, 2023 by phppup
Typos