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

将您的过渡移动到 :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

关于html - CSS，悬停后保持更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24970717/

上一篇：css - Bootstrap 旋转木马标题位置在右下角

下一篇：javascript - jQuery 清空错误的 div？

相关文章：

html - 单击时用另一个 div 替换 div

html - 在html中调整div

javascript - 尝试加载新的 iframe url 和文本时修复加载被 X-Frame 选项拒绝的问题

javascript - 相同 CSS 动画的不同动画持续时间

javascript - 我如何使用 Hammer.js 和 JQuery 平滑地移动元素？

javascript - 如何为引导菜单启用悬停事件？

Javascript+Css，请求解决方案 : mouseover hover displays div, 保持活跃直到mouseoff/click关闭

html - 表格单元格的间距

html - 如何将此形状作为菜单项的边框？

html - 当另一个 Div 悬停在第一个 Div 之后时如何更改 Div 的 CSS 属性