用jquery显示和隐藏一个DIV

只需替换/删除click事件并添加mouseover和mouseout(可以在原始元素选择上链接)。

<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>

编辑: 根据科林的建议……

对元素进行一点重构,这将提供您想要的结果。

<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>

只需将“click”替换为“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>

重新解决“悬停在DIV上”的问题。您可以设置如下内容:

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);
});

当鼠标再次悬停在元素上时,鼠标悬停处理程序将设置一个清除的超时。