Question

我有一个简单的 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>

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

SCRIPT

这是我尝试的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。

Answer 1

我认为问题是你可能没有加载jQuery。你可以仔细检查一下你是否已经将它添加到你的页面，然后对其进行初始化。

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

http://jsfiddle.net/e3vydbup/

＆＃13;

$("#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();      
});

＆＃13;

 #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;
 }

＆＃13;

<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>

＆＃13;

无法弄清楚为什么'悬停'不起作用

1 个答案: