Html CSS，悬停后保留更改

我使用CSS的一个很好的溢出效果

因此，如果我将一个图像悬停，它将淡入另一个图像，并使用以下代码：

#image{
margin: 0 auto;
width: 100%;
background-position: center;
background-repeat: no-repeat;
height: 400px;
background-image: url('xerath.png');
-o-transition:color .1s ease-out, background 1s ease-in;
-ms-transition:color .1s ease-out, background 1s ease-in;
-moz-transition:color .1s ease-out, background 1s ease-in;
-webkit-transition:color .1s ease-out, background 1s ease-in;
/* ...and now override with proper CSS property */
transition:color .1s ease-out, background 1s ease-in;
}

#image:hover{
background-image: url('riven.png');
}

但现在，如果我将鼠标悬停在它更改的图像上，当我关闭鼠标时，它会更改回原来的图像，我不希望它更改回原来的图像

---

如何解决此问题？

有两种可能的解决方案

仅CSS

将转换移动到

：悬停
并添加

-webkit-transition-duration:10000s;
   -moz-transition-duration:10000s;
    -ms-transition-duration:10000s;
     -o-transition-duration:10000s;
        transition-duration:10000s;   

到
#image
。这会使图像转换回如此缓慢，以至于看起来像是图像保留了更改


使用JavaScript

为图像添加
鼠标上方的事件侦听器
，并将类应用于
#图像
，以保留更改

JavaScript

document.querySelector("#image").addEventListener("mouseover",function() {
    this.classList.add("transitioned");
});

CSS

你能为这个制作一把小提琴吗？我认为单凭CSS是不可能的。你需要一些JS。就是这样，如果你在图像上快速移动鼠标，你会发现它有点问题，我不想这样：DIf它可能把JS放在哪里，什么JS>是的，我知道，但我不能写JS，所以有人能帮我解决吗，这样就不会有问题了：？第二个JS真的很好！但我想，当我再次将鼠标放在它上面时，它会变回原来的位置，这可能吗？：）但是现在如果你把鼠标快速移动到一个知道如何修理小车的人身上，它就有小车了？因为当你在上面快速移动鼠标时，它会发出声音。或者有没有可能每5秒或其他时间更改一次div的背景图像？这个应该可以：但我不知道这是否是最好的解决方案。如果每个人都有更好的想法，请让我知道！
#image.transitioned {
    background-image: url('http://g2f.nl/07vbp18');
}