一定时间后如何关闭悬停效果？

Question

当图像图像悬停时，我会产生悬停效果，出现更大的图像（为了清楚起见）。我希望这种更大的图像效果在三秒钟后结束，并且仍然具有悬停能力。如果图像被移开，然后回到；我希望更大的图像再加载三秒钟。每次图像徘徊时，效果都会持续三秒钟。

我尝试过CSS动画，过渡，Settimeout，但没有一个像我需要的那样工作。任何帮助都将受到赞赏。我在这个项目上有很多代码，因此我将尝试仅包括相关部分。提前致谢。

一旦我弄清楚自己在做什么，我将添加代码。

悬停图像的建筑级别的代码

#PlayerMarker1 {
  position: absolute;
  left:2%;
  top: 2%;
  z-index: 9;
}

#Player1Final{
  position: absolute;
  left:2%;
  top: 2%;
  z-index: 9;
}

/* Elements for Image load on hover*/

.playerMarker img{
  margin: 0 5px 5px 0;
  }

.playerMarker:hover{
  background-color: transparent;
  }
  
  .playerMarker:hover img{
  border: 1px;
  }
  
  .playerMarker span{ /*CSS for enlarged image*/
  position: absolute;

  padding: 0px;
  left: -1000px;
  /*background-color: black ;*/
  visibility: hidden;
  color: black;
  text-decoration: none;
  }
  
  .playerMarker span img{ /*CSS for enlarged image*/
  border-width: 0;
  padding: 2px;
  }
  
  .playerMarker:hover span{ /*CSS for enlarged image*/
  visibility: visible;
  top: 0;
  left: 100px; /*position where enlarged image should offset horizontally */
  z-index: 50;
  }

定义图像的代码。

<div id="Player1Test">
    <a id="PlayerMarker1" href="#thumb1"><img src="Player Markers/Morty_Icon.png" width="auto" height="auto"/><span><img src="Player Images/Morty_Token.png" /><br /></span></a>
  </div>

该脚本将PlayerMarker类添加到我需要的元素中。

  /* Script to add class to player marker ID items */

   function Player1Function() {
   var Player1FinalTest = document.getElementById("PlayerMarker1");
   Player1FinalTest.classList.add("playerMarker");
   Player1FinalTest.id='Player1Final';
   }

Answer 1

似乎CSS动画脉动图像可以正常工作。运行代码片段进行尝试。

img {
  margin: 25px;
  width: 100px;
  height: auto;
}

img:hover {
  animation: pulse 2s 1;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    50% {
        transform: scale(1.4);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }

<h4>Hover the mouse over image<h4>
<img src="https://stackoverflow.design/assets/img/favicons/apple-touch-icon.png">

Answer 2

瑜伽士使用动画有一个很好的答案，该动画可以适应清楚地移动您的元素。我想添加一个使用延迟来操纵左和顶值的答案。

您本质上是将隐藏的图像从屏幕上移动到屏幕上。尽管这有点奇怪，因为可能有更明确的方法可以完成此任务，但您可以立即将左移动到视图中，并延迟移动top out视图。

悬停和基本元素需要不同的延迟，因此它立即返回到原始位置，可用于重复使用，但延迟在悬停时移开。

这可能会以您当前的项目为基础。

如果您有任何疑问，请询问