如何让隐藏的div在jQuery悬停时保持可见状态？

问题描述：

我有一个令人困惑的问题。当我的第一个div“leftbox”悬停时，显示“rightbox”（隐藏的div），但是当“leftbox”没有被覆盖时，它最终会消失。但是当rightbox悬停时，我需要“rightbox”保持可见状态，然后当用户的鼠标离开rightbox时，然后它应该消失。我怎样才能使这个工作？我真的很感激帮助。如何让隐藏的div在jQuery悬停时保持可见状态？

答

如果你添加一个容器类，它工作正常。

$(function(){ 
 
\t $('.container').hover(function(){ 
 
\t \t var boxId = $(this).find("[data-id]").attr('data-id'); 
 
\t \t $('#'+boxId).stop().fadeToggle(); 
 
\t }); 
 
});

.leftbox { 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t border: 1px solid black; 
 
\t float: left; 
 
} 
 
.rightbox { 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t border: 1px solid black; 
 
\t background: #99bf8f; 
 
\t margin-left: 110px; 
 
\t 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> \t \t \t 
 
</body> 
 
</html>

哇，谢谢！你救了我的命！！ – confused5000

没问题！如果你可以标记为答案，这将有很大帮助。 – Neil

我是，但我不断收到一个错误，我不得不等待5分钟。对不起，我会等到计时器结束为止 – confused5000

如何让隐藏的div在jQuery悬停时保持可见状态？

相关推荐