I have created a simple JSFiddle for the problem. Here is the link: 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;
}
Basically over here, I can hover on any circle to change their color. I would like to ask how could I make the orange color stays on on any particular circle that I hovered on after the mouse moved away to white container?
Any script or CSS animation I could use to solve the problem?
Just add an mouseover
event to .circle
element and write an active
CSS class which has background-color
property and when event
occurs remove active
class from any .circle
and add it to current element
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
}
Using JQuery you can add a class to an element as such:
$(element).on('hover', function() {
// this if you're hovering over the element that would change, otherwise rename 'this' to whatever element class or id you want to change
$(this).addClass('NameOfClass');
});
You can then have that class in CSS
.NameOfClass {
background-color: orange;
}
And then just remove that class when you want.
Change
.circle:hover
to.hover
.hover {
background:orange;
transition: all 0.5s ease
}
A) IF you want orange color be forever :
Use this
jquery
$(document).ready(function(){
$('.circle').hover(function(){
$(this).addClass('hover');
})
})
$(document).ready(function(){ $('.circle').hover(function(){ $(this).addClass('hover'); }) })
.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.5s ease } .hover { background:orange; transition: all 0.5s ease }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class= "container"> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> </div>
B) If you want orange color be until mouse move on other circle
Use this
jquery
$(document).ready(function(){
$('.circle').hover(function(){
$('.circle').removeClass('hover');
$(this).addClass('hover');
})
})
$(document).ready(function(){ $('.circle').hover(function(){ $('.circle').removeClass('hover'); $(this).addClass('hover'); }) })
.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.5s ease } .hover { background:orange; transition: all 0.5s ease }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class= "container"> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> </div>
You can use Jquery to set a class when the mouse is hovered. Then the class will remain set even after the mouse moves away.
$(".circle").hover(function() {
$(this).addClass("hovered");
});
$( ".circle" ).mouseover(function(){
$(this).css('background','orange')
}
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.