我有这样一个问题。在鼠标进入,我想红色圆圈是改变为蓝色圆圈。但通过这个代码,我有两个圆圈在屏幕上,红色消失了鼠标进入。如何解决这个问题?
$(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>
4条答案
按热度按时间tyg4sfes1#
我将使用1个圆圈,在其中切换
mouseenter
和mouseleave
上的background-color
因为你Might Not Need Jquery,上面的纯JavaScript版本:
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个
bfhwhh0e2#
默认情况下,隐藏蓝色圆圈并将鼠标事件绑定到父对象
brc7rcf03#
试试这个方法,应该会有帮助:
wmomyfyw4#
我不知道你想达到什么目的,但据我所知,我已经添加了代码。我希望这将有助于你。