我已经为这个问题创建了一个简单的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
}
原文地址:https://www.jb51.cc/html/426277.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。