function show_sidebar() { document.getElementById('sidebar').style.visibility="vis...">
Geek Answers Handbook

Show hide div for mouse and mouse

<script type="text/javascript"> function show_sidebar() { document.getElementById('sidebar').style.visibility="visible"; } function hide_sidebar() { document.getElementById('sidebar').style.visibility="hidden"; } </script> <img src="images/cart.jpg" width="80px" height="30px" onMouseOver="show_sidebar()" onMouseOut="hide_sidebar()"> <div id="sidebar">some thing</div>

This is my code for showing and hiding the sidebar of a div on the mouse and mouse. Its working, but I want, when I have the mouse cursor on the image, the sidebar div is displayed, and I want the sidebar div to display as well when the mouse is over the sidebar. How can you do this.

+6
source share
7 answers

Move the event handlers to the div wrapper to accomplish what you want.

 <div id="wrapper" onMouseOver="show_sidebar()" onMouseOut="hide_sidebar()"> <img src="images/cart.jpg" width="80px" height="30px"> <div id="sidebar">some thing</div> </div>
+9
source

If you can wrap them in a common parent, it's simple, just with CSS, no JavaScript needed.

CSS

 #sidebar { display: none; } .cart:hover #sidebar { display:block; }

HTML:

 <div class="cart"> <img src="images/cart.jpg" width="80px" height="30px" /> <div id="sidebar">some thing</div> </div>

Example:

Jsfiddle

This can be done without wrapping, but you must make sure that the image and div overlap so that the cursor can move in the div. Wrapping avoids this problem.

Also note that not everyone uses a mouse.

+14
source

use it with css, it's easier

  <style> #sidebar{ display : none; } img:hover ~ #sidebar { display : block; } #sidebar:hover { display : block; } </style> <img src="images/cart.jpg" width="80px" height="30px" > <div id="sidebar">some thing</div>

Delay:

 <style> #sidebar{ opacity : 0; } img:hover ~ #sidebar { opacity : 1; } #sidebar:hover { opacity : 1; } #sidebar:not(hover) { animation-delay:2s; -webkit-animation-delay:2s; -webkit-transition: opacity 1s ease-out; opacity : 0; } </style>
+3
source

Here he is:

http://jsfiddle.net/luckmattos/CV9uX/

using jquery

 $('#img').hide(); $('#sidebar').mouseover(function () { $('#img').show(); }); $('#sidebar').mouseout(function () { $('#img').hide(); });

HTML

 <a id="sidebar">Show on Over</a> <div class="img"><img src="http://www.highsnobiety.com/files/2013/05/lamborghini-egoista-concept-car-9.jpg" width="250px" id="img"> </div>
+1
source

Invisible elements do not have mouse events. Try the following:

 <script type="text/javascript"> function show_sidebar() { document.getElementById('sidebar').style.opacity = 1; } function hide_sidebar() { document.getElementById('sidebar').style.opacity = 0; } </script> <img src="images/cart.jpg" width="80px" height="30px" onMouseOver="show_sidebar()" onMouseOut="hide_sidebar()"> <div id="sidebar" style="opacity: 0;" onMouseOver="show_sidebar()">some thing</div>
-1
source

I think this is the best and easiest way to work with the latest version of jquery.

 <script> $(document).ready(function(){ $("#div2").hide(); $("#div1").mouseover(function(){ $("#div2").fadeIn(); }); $("#div1").mouseout(function(){ $("#div2").fadeOut(); }); }); </script> <div id="div1">Move the mouse pointer over this paragraph.</div> <div id="div2" >div2.</div>
-1
source

try

 <script type="text/javascript"> function show_sidebar() { document.getElementById('sidebar').style.display="block"; } function hide_sidebar() { document.getElementById('sidebar').style.display="none"; } </script> <img src="images/cart.jpg" width="80px" height="30px" onMouseOver="show_sidebar()" onMouseOut="hide_sidebar()"> <div id="sidebar">some thing</div>
-2
source

More articles:


All Articles