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...
Just change the click event to mouseout ;-).
$(".link1").mouseout(function(){
$(".myList").hide()
}
try using this instead http://jsfiddle.net/G28aH/3/
Try
$('.myList').mouseout(function() { $(this).hide(); });
$(".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();
});
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
加载中,请稍侯......
精彩评论