懸停（）jquery未能在我的情況下正常工作

Question

我的問題是我的孩子是絕對的位置，我必須這樣做。我無法將鼠標懸停在使用懸停功能的小孩身上，因爲它懸停在我的選擇器上。我花了幾個小時解決這個問題，但失敗了。

我的代碼如下：

$(function() { 
 
    $("#hdCallUs").hover(function() { 
 
     $('.contact_numbers').show(); 
 
    }, function() { 
 
     $('.contact_numbers').hide() 
 
    }); 
 
});

ul, li { 
 
    list-style:none 
 
} 
 
#hdCallUs .call_txt { 
 
    cursor: pointer; 
 
    float:right; 
 
} 
 
#hdCallUs .contact_numbers { 
 
    display: block; 
 
    list-style: none; 
 
    position: absolute; 
 
    top: 40px; 
 
    width: 155px; 
 
    background: #fff; 
 
    right: 0; 
 
    text-align: right; 
 
    border: 1px solid #ddd; 
 
    border-top: 0; 
 
    padding: 0; 
 
} 
 
#hdCallUs .contact_numbers li { 
 
    padding: 8px; 
 
    float: none; 
 
    border-bottom: 1px solid #ddd; 
 
    cursor: pointer; 
 
} 
 
#hdCallUs .contact_numbers li:last-child { 
 
    border-bottom: 0; 
 
} 
 
#hdCallUs .contact_numbers li:hover { 
 
    background: #F9F9F9; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li id="hdCallUs"> <span class="glyphicon glyphicon-earphone"></span> 
 
<span class="call_txt">Call Now</span> 
 

 
    <div class="contact_numbers" style="display:none"> 
 
     <ul> 
 
      <!-- added this --> 
 
      <li>999</li> 
 
      <li>888</li> 
 
     </ul> 
 
    </div> 
 
</li>

任何解決方案？

Answer 1

$(function() { 
 
    $("#hdCallUs .call_txt").hover(function() { 
 
     $('.contact_numbers').show(); 
 
    }); 
 

 
$("#hdCallUs").mouseleave(function() { 
 
    $(this).find('.contact_numbers').hide(); 
 
}); 
 

 

 
});

ul, li { 
 
    list-style:none 
 
} 
 
    
 
#hdCallUs { 
 
display: inline-block; 
 
float: right; 
 
} 
 

 
#hdCallUs .call_txt { 
 
    cursor: pointer; 
 
    display: block; 
 
    text-align: right; 
 
    width: 100%; 
 

 
} 
 
#hdCallUs .contact_numbers { 
 
    display: block; 
 
    list-style: none; 
 
    top: 40px; 
 
    width: 155px; 
 
    background: #fff; 
 
    right: 0; 
 
    text-align: right; 
 
    border: 1px solid #ddd; 
 
    border-top: 0; 
 
    padding: 0; 
 
} 
 
#hdCallUs .contact_numbers li { 
 
    padding: 8px; 
 
    float: none; 
 
    border-bottom: 1px solid #ddd; 
 
    cursor: pointer; 
 
} 
 
#hdCallUs .contact_numbers li:last-child { 
 
    border-bottom: 0; 
 
} 
 
#hdCallUs .contact_numbers li:hover { 
 
    background: #F9F9F9; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li id="hdCallUs"> <span class="glyphicon glyphicon-earphone"></span> 
 
<span class="call_txt">Call Now</span> 
 

 
    <div class="contact_numbers" style="display:none"> 
 
     <ul> 
 
      <!-- added this --> 
 
      <li>999</li> 
 
      <li>888</li> 
 
     </ul> 
 
    </div> 
 
</li>

Answer 2

試試這個

$("#hdCallUs").hover(function(){ 
    $('.contact_numbers').show(); 
}).mouseleave(function(){ 
    $('.contact_numbers').hide(); 
});