I have such a problem. On mouse enter, I want red circle to be changed with blue circle. But by this code, I have two circles on screen and red of them disappears on mouse enter. How to solve this problem?
$(document).ready(function(){
$('.red').mouseenter(function(){
$('.blue').show();
}, function(){
$('.red').hide();
});
});.red{
margin-left: auto;
margin-right: auto;
width:200px;
height: 200px;
background-color: red;
border-radius: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.blue{
margin-left: auto;
margin-right: auto;
width:200px;
height: 200px;
background-color: blue;
border-radius: 150px;
display: flex;
align-items: center;
justify-content: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="circles">
<div class="red">red circle</div>
<div class="blue">blue circle</div>
</div>>Solution :
I’d use 1 circle on which you toggle the background-color on mouseenter and mouseleave
$('.circle').mouseenter((e) => $(e.target).css('background-color', 'rgb(0, 0, 255)'));
$('.circle').mouseleave((e) => $(e.target).css('background-color', 'rgb(255, 0, 0)'));.circle {
margin-left: auto;
margin-right: auto;
width:200px;
height: 200px;
border-radius: 150px;
display: flex;
align-items: center;
justify-content: center;
background-color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="circles">
<div class="circle"></div>
</div>