gpt4 book ai didi

javascript - 当用 jQuery 悬停时,如何让隐藏的 div 保持可见?

转载 作者:太空宇宙 更新时间:2023-11-04 08:55:06 25 4
gpt4 key购买 nike

我有一个令人困惑的问题。当我的第一个 div“leftbox”悬停时,“rightbox”(隐藏的 div)显示,但当“leftbox”未悬停时它最终消失。但我需要“rightbox”在 rightbox 悬停时保持可见,然后当用户的鼠标离开 rightbox 时,然后它应该消失。我怎样才能让它工作?非常感谢您的帮助。

最佳答案

如果您添加一个容器类,它工作正常。

$(function(){
$('.container').hover(function(){
var boxId = $(this).find("[data-id]").attr('data-id');
$('#'+boxId).stop().fadeToggle();
});
});
.leftbox {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.rightbox {
width: 100px;
height: 100px;
border: 1px solid black;
background: #99bf8f;
margin-left: 110px;
display: none;
}
.container {
float:left;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="test.css">
</head>

<body>

<div class="container">
<div class="leftbox" data-id="functionbox1"></div>
<div class="rightbox" id="functionbox1"></div>
</div>

<script src="test.js"></script>
</body>
</html>

关于javascript - 当用 jQuery 悬停时,如何让隐藏的 div 保持可见?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43164127/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com