当悬停在jQuery上时，如何使隐藏的div保持可见？
[英]How to get a hidden div to stay visible when hovered over with jQuery?
问题描述
I have a confusing issue. 
我有一个令人困惑的问题。 When my first div "leftbox" is hovered over, "rightbox" (the hidden div) displays, but it eventually disappears when "leftbox" is not hovered over. 当我的第一个div悬停在“ leftbox”上时，将显示“ rightbox”（隐藏的div），但是当未将“ leftbox”悬停在其上时，它最终消失。 But I need "rightbox" to stay visible when rightbox is hovered over, then when the user's mouse leaves rightbox, then it should disappear. 但我需要“rightbox”当rightbox悬停在留可见，那么当用户的鼠标离开rightbox， 那么就应该消失。 How can I get this to work? 我该如何工作？ I'd really appreciate the help. 我非常感谢您的帮助。
1 个解决方案
解决方案1
1 已采纳 2017-04-02 02:57:34
If you add a container class it works fine. 如果添加容器类，则可以正常工作。
$(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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.