CODEWITHSUNDEEP
javascripthtmljquery
Luka Bitsadze
Luka Bitsadze

Reputation: 15

Change div with another div using jQuery

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>

Upvotes: 0

Views: 43

Answers (4)

0stone0
0stone0

Reputation: 43924

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>

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 class="circles">
    <div class="circle"></div>
</div>

Upvotes: 1

iftikharyk
iftikharyk

Reputation: 959

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 class="circles">
  <div class="red">red circle</div>
  <div class="blue">blue circle</div>
</div>

Upvotes: 0

Hiren Patel
Hiren Patel

Reputation: 1157

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 class="circles">
        <div class="change red">Red Circle</div>
    </div>
</body>
</html>

Upvotes: 0

eilenart
eilenart

Reputation: 11

Try this way, it should help:

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

Upvotes: 0

Related Questions