CODEWITHSUNDEEP
javascripthtml
user3304709
user3304709

Reputation:

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.

Upvotes: 5

Views: 108126

Answers (7)

Kiran
Kiran

Reputation: 1

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>

Upvotes: -1

أنيس بوهاشم
أنيس بوهاشم

Reputation: 940

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>

Upvotes: 3

Johan
Johan

Reputation: 1026

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>

Upvotes: 10

epascarello
epascarello

Reputation: 207557

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.

Upvotes: 17

Mattos
Mattos

Reputation: 447

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>

Upvotes: 3

Ood
Ood

Reputation: 1805

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>

Upvotes: -1

Mostafa King
Mostafa King

Reputation: 103

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>

Upvotes: -2

Related Questions