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

发布时间：2020-12-14 23:00:14 所属栏目：资源来源：网络整理

导读：我已经为这个问题创建了一个简单的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:

我已经为这个问题创建了一个简单的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中删除活动类并将其添加到当前元素

$(".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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!