Limiting the hover effect time in html-CodePudding

How can I limit the hover effect time in html, I tried to make a code like below, so that the hover effect disappears after a while

<div >Hover me!</div>

<style>

.hover {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: green;
}

.hover:active {
  background: red;
  // maximum hover time of 3 seconds
}

</style>

Please help me with main code as above

CodePudding user response：

You can start an animation on hover and give that a timeframe.

CodePudding user response：

div{
    display:inline-block;
    padding:5px;
    margin:10px;
    border:1px solid #ccc;
    transition: 0s background-color;
    transition-delay:2s;
}
div:hover{
    background-color:Green;
}

<div>hover</div>

CodePudding user response：

You need do like this:<div >Hover me!</div><style>.hover { transition-property: background; transition-delay: 3s; background: green;}.hover:hover { background: red;}</style>

CodePudding user response：

You can use a keyframe animation:

.hover {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: green;
}

.hover:hover {
  /* maximum hover time of 3 seconds */
  animation-name: hoverAnim;
  animation-duration: 3s;
}

@keyframes hoverAnim {
  from {
    background: red;
  }
  /* If you want to fade over time you can remove the 99% part */
  99% {
    background: red;
  }
  to {
    background: green;
  }
}

<div >Hover me!</div>

If you don't want the instant switch, you can remove the 99% part. Also, I changed :active to :hover, I assume that's what you meant?