无法弄清楚为什么“悬停”不起作用答案

【问题标题】：Unable to figure out why 'hover' is not working无法弄清楚为什么“悬停”不起作用
【发布时间】：2014-12-08 00:58:40
【问题描述】：

我有一个简单的 HTML，它是这样的：-

 <div id="divEntity" class="col-md-2 noPadding align-right">
                <asp:Label runat="server" ID="lblEntity" CssClass="labelText"></asp:Label>
                <span id="showEntity" class="trigger trigger-caret"></span>
                <ul id="ulMenu" class="ulMenuParent contextMenu-style lstTransactions">
                    <li><a href="javascript:void(0)" onclick="BindCustomerGrid();"><%=(Resources.Resource.lblContacts)%></a></li>
                    <li><a href="javascript:void(0)" onclick="BindInvoiceGrid();"><%=(Resources.Resource.Invoices)%></a></li>
                    <li><a href="javascript:void(0)" onclick="BindProjectGrid();"><%=(Resources.Resource.ManageProposals)%></a></li>
                    <li><a href="javascript:void(0)" onclick="BindProposalGrid();"><%=(Resources.Resource.Proposals)%></a></li>
                    <li><a href="javascript:void(0)" onclick="BindPurchaseOrderGrid();"><%=(Resources.Resource.PurchaseOrders)%></a></li>
                    <li><a href="javascript:void(0)" onclick="BindWorkOrderGrid();"><%=(Resources.Resource.WorkOrder)%></a></li>
                </ul>
            </div>

我需要显示 菜单列表，即悬停在 showEntity 上的 ulMenu。我无法弄清楚为什么我的 hover 不起作用。试过on-hover，mouseover，但没有得到预期的结果。当我将我的脚本放入 console 然后运行时，希望 ulMenu 能够打开，但这太不一致了。这里的专家，请帮助！

脚本

这是我尝试过的mouseover 事件，但没有运气：-

$("#showEntity").on('mouseover', function () {
    var offset = $(this).offset();
    $(this).parent().find('ul').show().offset({ top: offset.top + 8, left: offset.left - 110 });

}).on('mouseout', function () {
    $(this).parent().find('ul').hide();
});

这是我尝试过的hover 事件，但没有运气：-

$("#showEntity").hover(function () {
    var offset = $(this).offset();
    $(this).parent().find('ul').show().offset({ top: offset.top + 8, left: offset.left - 110 });
},function(){
    $(this).parent().find('ul').hide();      
});

CSS

 #divEntity ul#ulMenu {
     display: none;
     position: absolute;
 }


.trigger {
     background-image: url('../Image/p7PM_dark_south.gif');
     background-repeat: no-repeat;
     background-position: right center;
     font-size: 1.1em;
 }

.trigger-caret:hover {
    background-color: #ebebeb;
    border-color: #adadad;
 }

.trigger-caret {
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
    padding: 0px 3px 0px 15px !important;
 }

仅供参考：此处的 HTML 中没有节点是动态生成的。使用 jQuery 1.9.0。

【问题讨论】：

小提琴怎么样？ :D
#showEntity 没有内容，没有宽度，没有高度 ---> 没有 hover 可能。
实际上，trigger 和 trigger-caret 类使跨度看起来像 image。我会更新我的 CSS 部分，让你更好地理解。
如果你喜欢在你的问题中包含这个FIDDLE。图片链接已损坏，因此#showEntity 非常小，但似乎可以正常工作。

标签： javascript jquery jquery-plugins jquery-events

【解决方案1】：

我认为问题在于您可能没有加载 jQuery。您能否仔细检查一下您是否已将其添加到您的页面并对其进行了初始化。

我把你的代码放在一个小提琴中，悬停就可以了。

http://jsfiddle.net/e3vydbup/

$("#showEntity").hover(function () {
    var offset = $(this).offset();
    $(this).parent().find('ul').show().offset({ top: offset.top + 8, left: offset.left - 110 });
},function(){
    $(this).parent().find('ul').hide();      
});

 #divEntity ul#ulMenu {
     display: none;
     position: absolute;
 }


.trigger {
     background-image: url('../Image/p7PM_dark_south.gif');
     background-repeat: no-repeat;
     background-position: right center;
     font-size: 1.1em;
 }

.trigger-caret:hover {
    background-color: #ebebeb;
    border-color: #adadad;
 }

.trigger-caret {
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
    padding: 0px 3px 0px 15px !important;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="divEntity" class="col-md-2 noPadding align-right">
                <asp:Label runat="server" ID="lblEntity" CssClass="labelText"></asp:Label>
                <span id="showEntity" class="trigger trigger-caret"></span>
                <ul id="ulMenu" class="ulMenuParent contextMenu-style lstTransactions">
                    <li><a href="javascript:void(0)" onclick="BindCustomerGrid();"><%=(Resources.Resource.lblContacts)%></a></li>
                    <li><a href="javascript:void(0)" onclick="BindInvoiceGrid();"><%=(Resources.Resource.Invoices)%></a></li>
                    <li><a href="javascript:void(0)" onclick="BindProjectGrid();"><%=(Resources.Resource.ManageProposals)%></a></li>
                    <li><a href="javascript:void(0)" onclick="BindProposalGrid();"><%=(Resources.Resource.Proposals)%></a></li>
                    <li><a href="javascript:void(0)" onclick="BindPurchaseOrderGrid();"><%=(Resources.Resource.PurchaseOrders)%></a></li>
                    <li><a href="javascript:void(0)" onclick="BindWorkOrderGrid();"><%=(Resources.Resource.WorkOrder)%></a></li>
                </ul>
            </div>

【讨论】：