Question

当您点击链接时，它会显示div“somecontent”。如果再次点击链接，它将隐藏。如何在悬停在链接上时进行div显示并在移开时隐藏而不是在点击时显示和隐藏？

以下是代码：

<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

只需将“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>

Answer 2

只需替换/删除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>

Answer 3

RE解决“悬停在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);
});

鼠标输出处理程序设置超时，当您再次将元素鼠标悬停时，该超时会被清除。

使用jQuery显示和隐藏div

3 个答案: