1

When you click on the link, it with display the div "somecontent". And if you click on the link again, it will hide. How can I make the div show when hovering over the link and hide when moving away instead of showing and hiding on click?

Here is the code:

<script type="text/javascript"> $(document).ready(function(){ $(".showcontent").click(function(){ $(".somecontent").toggle("fast"); }); }); </script> <a class="showcontent" href="">Show</a> <div class="somecontent"> <p>some content</p> </div>
Improve this question

3 Answers 3

Reset to default
2

Simply replace "click" with a "mouseover"...

<script type="text/javascript"> $(document).ready(function(){ $(".showcontent").mouseover(function(){ $(".somecontent").toggle("fast"); }); }); </script> <a class="showcontent" href="">Show</a> <div class="somecontent"> <p>some content</p> </div>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Just replace/remove the click event and add mouseover and mouseout (you can chain on the original element selection).

<script type="text/javascript"> $(document).ready(function(){ $(".showcontent").mouseover(function(){ $(".somecontent").show(); }).mouseout(function(){ $(".somecontent").hide(); }); $(".somecontent").mouseout(function() { $(this).hide(); }); $(".closelink").click(function() { $(this).parent().hide(); }); }); </script> <a class="showcontent" href="">Show</a> <div class="somecontent"> <p>some content</p> </div>

Edit: With Colin's Suggestion..

A little refactoring of the elements, this should provide the results you want.

<div class="showcontent"> <a href="#">Show</a> <div class="somecontent"> <span class="closelink">Close</span> <p>some content<br /> <a href="#">Link 1</a><br /> <a href="#">Link 2</a><br /> <a href="#">Link 3</a> </p> </div> </div>
Improve this answer

6 Comments

Your solution works but when I try to move over the div, it hides. Is there a way for the div to stay open and hide when moving away like the link? I should of mentioned that at the beginning.
To a degree there is, but that's when the actually functionality starts to get quirky unless you provide a method for "closing" the open div. Basically you can set it so that when you mouseout on the link it won't close the div but if you mouseout on the div it will close it. This might not be the actual interaction you want though because if there is never a mouseoever on the div then it won't close if you just move away from the link. Can you explain the exact behavior you want to occur (given the scenario described)?
Your a.showcontent needs to wrap around div.somecontent. But having a 'div' inside an 'a' is invalid and considering the 'a' does nothing but show another 'div', I suggest making it into a 'div'. <div class="showcontent"> <div class="somecontent"> <p>content</p> </div> </div>
Colin brings up a good point, if the anchor isn't required then some proper nesting can provide the solution you seem to want.
@Quintin: Okay, your suggestion would work. Could the div have a close link? @Colin: I had the 'a' because it was going to be an actual link, but I just didn't put it there. When mousing over the div 'somecontent', it will contain a couple of more links. Would it still be invalid?
|
0

RE Solving the "hover over the div" problem. You could set up something like this:

var revealLink = $('.showcontent'); var revealDiv = $('.somecontent'); var revealTimeout = 0; // we attach the mouseover/out events to both. revealLink.add(revealDiv).hover(function() { clearTimeout(revealTimeout); revealDiv.show(); }, function() { // give user 500 ms to get over the other element to not hide. revealTimeout = setTimeout(function() { revealDiv.hide(); }, 500); });

Where your mouse out handler sets a timeout that gets cleared as you mouseover the element again.

Improve this answer

Comments