无法弄清楚为啥“悬停”不起作用
Posted
技术标签:
【中文标题】无法弄清楚为啥“悬停”不起作用【英文标题】: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
非常小,但似乎可以正常工作。
【参考方案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>
【讨论】:
以上是关于无法弄清楚为啥“悬停”不起作用的主要内容,如果未能解决你的问题,请参考以下文章