How to get a hidden div to stay visible when hovered over with jQuery?

Question

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. But I need "rightbox" to stay visible when rightbox is hovered over, then when the user's mouse leaves rightbox, then it should disappear. How can I get this to work? I'd really appreciate the help.

Answer 1

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>

How to get a hidden div to stay visible when hovered over with jQuery?

Question

1 answers

solution1
1 ACCPTED 2017-04-02 02:57:34

How to get a hidden div to stay visible when hovered over with jQuery?

Question

1 answers

solution1 1 ACCPTED 2017-04-02 02:57:34

solution1
1 ACCPTED 2017-04-02 02:57:34