javascript– 即使在取消之后,如何让悬停效果保持不变？

概述我已经为这个问题创建了一个简单的JSFiddle.链接在这里：https://jsfiddle.net/tnkh/Loewjnr3/CSS：.container{ background: white; display:flex; justify-content: center; align-items: center; height:50px }

我已经为这个问题创建了一个简单的Jsfiddle.链接在这里：
https://jsfiddle.net/tnkh/Loewjnr3/

CSS：

.container{ background: white; display:flex; justify-content: center; align-items: center; height:50px}.circle { display: inline-block; wIDth: 20px; height: 20px; background: #0f3757; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; margin-left:10px; float:left; Transition: all 0.3s ease}.circle:hover { background:orange;}

基本上在这里,我可以悬停在任何圆圈上来改变它们的颜色.我想问一下,在鼠标移到白色容器后,我怎么能让橙色保持在我徘徊的任何特定圆圈上？

我可以使用任何脚本或CSS动画来解决问题？

最佳答案只需将鼠标悬停事件添加到.circle元素并编写一个具有background-color属性的活动CSS类,并在事件发生时从任何.circle中删除活动类并将其添加到当前元素

Js

$(".container span.circle").on('mouSEOver',function(){    $(".circle").removeClass('active');//remove from other elements    $(this).addClass('active');});

CSS

.active {  background:orange;  Transition: all 0.5s ease}

Updated Fiddle 总结

以上是内存溢出为你收集整理的javascript – 即使在取消之后,如何让悬停效果保持不变？全部内容，希望文章能够帮你解决javascript – 即使在取消之后,如何让悬停效果保持不变？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。