CODEWITHSUNDEEP
jquery
UID
UID

Reputation: 1

Jquery show hide single link menu-unable to hide on mouse out

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".link").click(function(){
            $(".myList").show();
            $(".link1").click(function(){
                $(".myList").hide();
            });
        });
    });
</script>
</head>
<body>
<div class="myDiv"> <a href="#." class="link">Text</a>
<div class="mylist" style="display:none;"> <a href="#." class="link1">Text</a> <a href="#." class="link1">Text</a> <a href="#."class="link1">Text</a> </div>
</div>
</body>
</html>

I want to hide list panel on mouse out, currently I am able to hide it on clicking on any link but want it on mouse out too...

Upvotes: 0

Views: 367

Answers (5)

Maxim
Maxim

Reputation: 301

If you don't use animation I think that it's better to use CSS :hover pseudo-class for this task. But if you want to use jQuery then use mouseout event. But in order to prevent dropdown from disappearing when moving over it you should bind event on .myDiv.

$('.myDiv').mouseout(function(){
    $(".myList").hide()
})

Also you can try hoverIntent plugin which was perfect for my needs. It delays showing and hiding in order to prevent accidental dissapearing.

http://cherne.net/brian/resources/jquery.hoverIntent.html

Upvotes: 0

Andy
Andy

Reputation: 30135

$(".link").click(function(ev){ 
    $(".myList").show();
    ev.preventDefault();
});
$(".link1").mouseout(function(){
    $(".myList").hide();
});

you had a typo too: mylist & myList

try this.

$(".link").click(function(ev){ 
    $(".myList").show();
    ev.preventDefault();
});
$(".myList").mouseleave(function(){
    $(".myList").hide();
});

Upvotes: 0

alh84001
alh84001

Reputation: 1283

Try

$('.myList').mouseout(function() { $(this).hide(); });

Upvotes: 0

Wahtever
Wahtever

Reputation: 3678

try using this instead http://jsfiddle.net/G28aH/3/

Upvotes: 0

JNDPNT
JNDPNT

Reputation: 7465

Just change the click event to mouseout ;-).

$(".link1").mouseout(function(){
    $(".myList").hide()
}

Upvotes: 2

Related Questions