Enquire

jQuery- Show On Click, Hide On Hover Out Function

jQuery Scripts & Helpful Snippets

Not sure how many people would be looking for a function like this, but I needed it, so I suspect someone else out there might too. The code below is an example of how you can click on a trigger to show an element (the < P > tag in this case); it is then hidden when the cursor is hovered away from the trigger. Slightly different from the second-click to hide function– the function below combines the “click” and “hover” events. I used this particular function for a dropdown menu- when clicking on the parent link, the dropdown appeared- instead of having to click again on the parent link to close the dropdown, I made it so a simple hover-out closed the dropdown menu.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<script type='text/javascript' src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript'>
$(function() {
 $('.trigger').click(function() {
  $("p").show();
 }), $(".trigger").hover(function() {
  //do nothing if hovered over
 }, function(){
  //hide on hover out
  $("p").hide();
 });
});
</script>
</head>
<body>
<a href="#" class="trigger">Link</a>
<p style="display:none;">
 Show the text in this paragraph
</p>
</body>

Comments

  1. don spoke on 05/09/2012

    Exactly what I was looking for, thanks!

  2. Paul spoke on 03/11/2012

    Me too …. Perfect … Many Thanks!! 🙂

Leave a reply

Your email address will not be published. Required fields are marked *

X