鼠标悬停和鼠标移动时显示隐藏div

Question

<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 sidebar div on mouseover and mouseout. Its working but i want is when i have mouseover on image, sidebar div is shown and i want sidebar div to be shown also when mouse is over sidebar. How can u do it.

Answer 1

If you can wrap them in a common parent it is as simple with just CSS, no JavaScript is 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

It can be done without wrapping, but you have to make sure that the image and div overlap so the cursor can move into the div. Wrapping it avoids that problem.

Also note, not everyone uses a mouse.

Answer 2

Move the eventhandlers to a wrapper div 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>

Answer 3

use it with css, it simplier

 <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>

With 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>

Answer 4

Here it is:

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

with 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>

Answer 5

Invisible elements don't have mouse events. Try this:

<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>

Answer 6

I think this is the best and easy method working with latest jquery version.

<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>

Answer 7

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>