Question

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>

Answer 1

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>