CODEWITHSUNDEEP
javascripthtmlcss
vrMan
vrMan

Reputation: 141

Convert click to onmouseover javascript

I want to change click event to an onmouseover event to open a my div and then if mouse goes left my div hide again , like a dropdown menu, can anyone help me please.

HTML code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Papermashup.com | Sliding Div</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="dropdown/drop.js" type="text/javascript"></script>
<link type="text/css" href="dropdown/drop.css" rel="stylesheet"/>

</head>

<body>
 <a href="#" class="show_hide" onmouseover="this.#" >Show/hide</a><br />
    <div class="slidingDiv" style="width:103px;height:60px;">
        <img alt="" height="80" src="images/dropdown.png" width="103">
    </div>
</body>
</html>

CSS code:

.show_hide {
    display:none;
}

JavaScript code:

$(document).ready( function() {

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click( function() {
         $(".slidingDiv").slideToggle();
    });

});

Upvotes: 0

Views: 513

Answers (2)

Pastor Bones
Pastor Bones

Reputation: 7351

Just use the mouseover binding instead of the click binding.

$('.show_hide').mouseover(function(){
    $(".slidingDiv").slideToggle();
}).mouseout(function(){
    $(this).slideToggle();
});

Upvotes: 0

NullPoiиteя
NullPoiиteя

Reputation: 57322

try 

 $(".show_hide").mouseenter(function() {
       $(".slidingDiv").slideToggle();
  })

Upvotes: 2

Related Questions