Question

我使用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');
}

但是现在如果我将图像悬停在图像上会发生变化，当我将鼠标从图像上移开时它会变回来，我不希望它变回来。

我该如何解决这个问题？

Answer 1

有两种可能的解决方案。

仅限CSS

将您的转场移至:hover并添加

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

到#image。这使得图像过渡得如此缓慢，以至于图像保持变化。

<强> Demo

使用JavaScript

为图片添加mouseover的事件监听器，并将一个类应用于保留更改的#image。

的JavaScript

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

CSS

#image.transitioned {
    background-image: url('http://g2f.nl/07vbp18');
}

<强> See Fiddle

CSS，一旦盘旋，就会保持变化

1 个答案: