show hide div on mouseover and mouseout

Answer 1

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 2

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 3

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 4

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 5

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 6

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>