Change div with another div using jQuery-CodePudding

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 >
    <div >red circle</div>
    <div >blue circle</div>
</div>

CodePudding user response：

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 >
    <div ></div>
</div>

Since you Might Not Need Jquery, a pure JavaScript version of the above:

const e = document.querySelector('.circle');
e.addEventListener('mouseenter', (e) => e.target.style.background = 'rgb(0, 0, 255)');
e.addEventListener('mouseleave', (e) => e.target.style.background = '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;
}

<div >
    <div ></div>
</div>

CodePudding user response：

By default hide the blue circle and bind mouse event on parent

$(document).ready(function() {
    $('.blue').hide();

  $('.circles').mouseover(() => {
    $('.blue').show();
    $('.red').hide();
  });
  
  $('.circles').mouseleave(() => {
    $('.red').show();
    $('.blue').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 >
  <div >red circle</div>
  <div >blue circle</div>
</div>

CodePudding user response：

Try this way, it should help:

    $(document).ready(function(){
    $('.red').mouseenter(function(){ 
        $('.blue').show();
        $('.red').hide();
    });
});

CodePudding user response：

I don't know what you are trying to achive, But as I undestood I've added the code. I hope this will help you.

$(document).ready(function(){
    $('.change').mouseenter(function(){ 
        $(this).addClass("blue");
        $(this).removeClass("red");
        $(this).html('Blue Circle');
    });
    
      $('.change').mouseleave(function(){ 
        $(this).addClass("red");
        $(this).removeClass("blue");
        $(this).html('Red Circle');
    });
});

.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;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div >
        <div >Red Circle</div>
    </div>
</body>
</html>