在我的情况下，Hover()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();
});