How do you know if a mouse has stopped hovering over an element?-CodePudding

I want to know how mouse has stopped hovering over an element in javascript or using css. I am making an animation, that the background changes colour when it is being hovered by a mouse and I also want to add animation when mouse stopped hovering over an element. How can I do that?

CodePudding user response：

You can add a transition to your element (and not to the element:hover or you will get the transition only on hover, not on mouseout).

.square {
  width: 150px;
  height: 150px;
  background-color: grey;
  transition: background-color .5s linear;
}

.square:hover {
  background-color: orange;
}

<div ></div>

CodePudding user response：

The background change will automatically revert when the mouse no longer hovers over the element:

div:hover { background-color: yellow; }

<div>Hover to turn yellow</div>

So there is no need for you to listen to an event, CSS will automatically detect that.

Or have I misunderstood your question?

CodePudding user response：

You need to check mouseout event. https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event

CodePudding user response：

onmouseover and onmouseout JavaScript events help you to make animation on hover and out

function onDiv(x) {
//on div
  x.style.background = "#f00";
 
}

function outsideDiv(x) {
//out side div
  x.style.background = "#000";
}

<div onm ouseover="onDiv(this)" onm ouseout="outsideDiv(this)" style='border:2px solid #000;width:100px;height:100px;'>
</div>