show hide div on mouseover and mouseout

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

Answers:

Answer

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

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

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

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

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

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

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.