使用jQuery将div更改为其他div

rm5edbpk  于 2022-12-22  发布在  jQuery
关注(0)|答案(4)|浏览(101)

我有这样一个问题。在鼠标进入,我想红色圆圈是改变为蓝色圆圈。但通过这个代码,我有两个圆圈在屏幕上,红色消失了鼠标进入。如何解决这个问题?

$(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>
tyg4sfes

tyg4sfes1#

我将使用1个圆圈,在其中切换mouseentermouseleave上的background-color

$('.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>

因为你Might Not Need Jquery,上面的纯JavaScript版本:
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

bfhwhh0e

bfhwhh0e2#

默认情况下,隐藏蓝色圆圈并将鼠标事件绑定到父对象

$(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>
brc7rcf0

brc7rcf03#

试试这个方法,应该会有帮助:

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

wmomyfyw4#

我不知道你想达到什么目的,但据我所知,我已经添加了代码。我希望这将有助于你。

$(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>

相关问题