Question

我有一些jquery执行链接菜单悬停效果。

我的问题是当我移动鼠标朝着悬停的（#test）div移动时，div会隐藏，所以我永远无法点击下面的链接。

以下是代码：

//HTML

<li id="hoverer" class="tab-link" data-tab="ideas_by_stage" style="position:relative">Hover here...</li>

<div id="test" style="display:none;position:absolute;z-index:999999;border:1px solid grey;width:200px;padding:4px 10px;left:170px;background-color:white;">

    <div class="btn"><a href="">Option 1</a></div>
    <div class="btn">Option 2</div>
    <div class="btn">Option 3</div>
    <div class="btn">Option 4</div>

</div>

//jQuery

$( "#hoverer" ).hover(function() {

      $('#test').toggle();

});

如何解决此问题？

Answer 1

http://api.jquery.com/hover/

<div>

$( "#hoverer" ).hover(function() {
      $('#test').fadeIn();
});

$( "#test" ).hover(function() {
      $(this).fadeIn();
}, function() {
      $(this).fadeOut();
});

Answer 2

您的代码工作正常，如果您移动红色边框可以点击链接，请参阅：

 $( "#hoverer" ).hover(function() {

      $('#test').toggle();
   })

li {
      border: 1px solid red;
}

<li id="hoverer" class="tab-link" data-tab="ideas_by_stage" style="position:relative">Hover here...

<div id="test" style="display:none;position:absolute;z-index:999999;border:1px solid grey;width:200px;padding:4px 10px;left:170px;background-color:white;">

    <div class="btn"><a href="">Option 1</a></div>
    <div class="btn">Option 2</div>
    <div class="btn">Option 3</div>
    <div class="btn">Option 4</div>

</div>
    </li>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

但最好的方法是使用点击事件，请参阅以下示例：

$(document).ready(function() {
    
    $("#hoverer").on("click",function(){
        $("#test").toggle(500);
    })
    
})

<li id="hoverer" class="tab-link" data-tab="ideas_by_stage" style="position:relative">Click For Show / Hidden
        </li>

        <div id="test" style="display:none;position:absolute;z-index:999999;border:1px solid grey;width:200px;padding:4px 10px;left:170px;background-color:white;">

    <div class="btn"><a href="">Option 1</a></div>
    <div class="btn">Option 2</div>
    <div class="btn">Option 3</div>
    <div class="btn">Option 4</div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 3

您可以使用不同的方法：

hoverer：on mouseenter show test
测试：关于mouseleave hide test

调整hoverer和test元素的尺寸，以便这种方法可以工作（即：如果你离开div但是进入li区域你会得到两个连续的事件：hide + show）。

摘录：

＆＃13;

$( "#hoverer" ).on('mouseenter', function(e) {
  $('#test').show();
});
$('#test').on('mouseleave', function(e) {
  $('#test').hide();
});

＆＃13;

#hoverer {
  background-color: lightblue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<li id="hoverer" class="tab-link" data-tab="ideas_by_stage" style="position:relative">Hover here...</li>

<div id="test" style="display:none;position:absolute;z-index:999999;border:1px solid grey;width:200px;padding:4px 10px;left:170px;background-color:white;">

    <div class="btn"><a href="">Option 1</a></div>
    <div class="btn">Option 2</div>
    <div class="btn">Option 3</div>
    <div class="btn">Option 4</div>

</div>

＆＃13;

jQuery避免在某个区域

3 个答案: