如何确定实际悬停的元素
Posted
技术标签:
【中文标题】如何确定实际悬停的元素【英文标题】：How to determine which element is actually being hovered 【发布时间】：2012-12-21 01:52:31 【问题描述】：我不懂很多JS。虽然我已经做了自己的搜索，但我找不到答案。所以我在这里问，希望你能帮助我。
我正在尝试创建一个基于 div 标签的导航菜单（如http://www.adobe.com/），并使用 jQuery 来制作“悬停时出现/消失”的功能。
简单的 div 结构：
<div id='menu'>
<div> Level 1 a
<div> Level 2 a </div>
<div> Level 2 b </div>
</div>
<div> Level 1 b
<div> Level 2 c </div>
<div> Level 2 d </div>
</div>
</div>
我知道它需要使用$('#menu').hover() 函数。我的问题是，如果只使用一个 id “菜单”，我可以如何或使用什么样的功能来确定悬停的实际菜单列表？
喜欢：
$("#menu").hover( // Div Menu is being hovered
function ()
// $el = Determine which menu inside of Div Menu is actually being hovered
// $el.show();
,
function ()
$el..hide();
);
或者也许我的结构完全错误，应该使用另一种方法来做到这一点？请帮忙。
【问题讨论】：
有a lot 的预先编写的jQuery 菜单，如果您不想从头开始编写一个？ Bootstrap 很受欢迎。 如果只是.hover()、.show()和.hide()，你最好用纯CSS构建菜单
为什么要使用 javascript？ jsfiddle.net/kboucher/nrAPu
我已经对那些免费的 jquery 菜单进行了研究。但我的目的是建立一个像索尼、亚马逊这样的导航菜单，在他们的菜单的第 3 级有一个幻灯片打开。
【参考方案1】：
$("#menu").hover( // Div Menu is being hovered
function (event)
$el = $(event.target);
$el.show();
,
function (event)
$el = $(event.target);
$el.hide();
);
【讨论】：
这不起作用，您不能在隐藏元素上触发悬停事件（以便随后显示） 是的，你是对的！这行不通。我实际上并没有考虑显示和隐藏元素，我专注于展示如何在触发悬停事件时检测鼠标下方的元素。【参考方案2】：实际上，没有hover 事件。 many different mouse events 有两种不同的模型，它们在从内部元素触发上是不同的。幸运的是，jQuery 的 hover 方法（实际上是 mouseenter 和 mouseleave）对此进行了抽象，并仅在父元素悬停时触发处理程序。
这意味着您必须将处理程序绑定到菜单树中的每个元素：
$("#menu div").hover(
function (event)
console.log(event);
$(this).children().show();
,
function (event)
$(this).children().hide();
);
Demo at jsfiddle.net
【讨论】：
非常感谢！！，我相信这就是答案。我可以再问一个问题吗？这里的事件，是否意味着div之间的目标？如果是这样，如果我将#menu div 更改为#menu ul，这意味着它只会针对ul 标签？ 是的，那么只有菜单中的<ul> 元素会附加处理程序。我不知道你的标记，但通常你会听 <li> 元素并显示/隐藏各自的内部列表 (<ul>)。
如果我想做一个像 Sony 和 Amazon 这样可以下拉然后滑出的菜单，你能告诉我应该看什么吗？？
我不知道索尼和亚马逊到底是做什么的，但您可能正在寻找jQuery's animate() method？
是的，他们必须使用 animate()，但我不知道他们如何构建它...我厌倦了解码他们的 html，但我不能。我擅长 php，但完全不擅长 js。而且我相信js比php难多了……【参考方案3】：
是的，您可以使用您编写的代码来确定何时悬停 div。然后触发一个显示下拉菜单的函数。当您定义导航栏的css时，您应该将开始时不必可见的部分设置为 display:hidden;在 div 中，所以它是隐藏的。然后通过 jquery 将代码注入到 css 中以更改属性显示。我给你一个例子。假设您创建了一个名为“hidden”的 div，并将其设置在 css 中以及其他可能的样式中： #隐藏 显示：隐藏
然后，您希望在鼠标悬停时显示 id 为“隐藏”的部分。 您可以使用：
$("#hidden").hover.css('display', 'block')
所以隐藏的部分会出现。 无论如何，您甚至可以仅通过使用不带 jquery 的 css 来创建下拉菜单。 这里我给你举个例子： 假设您在 html 文件中有此标记
<ul id="nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
<ul>
<li><a href="#">The product</a></li>
<li><a href="#">Meet the team</a></li>
</ul>
</li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="#">Sevice one</a></li>
<li><a href="#">Sevice two</a></li>
<li><a href="#">Sevice three</a></li>
<li><a href="#">Sevice four</a></li>
</ul>
</li>
<li>
<a href="#">Product</a>
<ul>
<li><a href="#">Small product (one)</a></li>
<li><a href="#">Small product (two)</a></li>
<li><a href="#">Small product (three)</a></li>
<li><a href="#">Small product (four)</a></li>
<li><a href="#">Big product (five)</a></li>
<li><a href="#">Big product (six)</a></li>
<li><a href="#">Big product (seven)</a></li>
<li><a href="#">Big product (eight)</a></li>
<li><a href="#">Enourmous product (nine)</a></li>
<li><a href="#">Enourmous product (ten)</a></li>
<li><a href="#">Enourmous product (eleven)</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul>
<li><a href="#">Out-of-hours</a></li>
<li><a href="#">Directions</a></li>
</ul>
</li>
</ul>
正如您在此处看到的，标记只是一系列嵌套的“ul”。没有冗长的 ID/类，没有 div，只有丰富的语义代码。
#nav ul 包含一系列 li，任何需要下拉菜单的内容都包含另一个 ul。请注意，下拉列表 ul 上没有任何类——这是因为我们使用级联来设置这些样式，从而使我们的标记更加清晰。
现在是 CSS：
#nav
list-style:none;
font-weight:bold;
margin-bottom:10px;
/* Clear floats */
float:left;
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
#nav li
float:left;
margin-right:10px;
position:relative;
#nav a
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
#nav a:hover
color:#fff;
background:#6b0c36;
text-decoration:underline;
/*--- DROPDOWN ---*/
#nav ul
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
#nav ul li
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
#nav ul a
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
#nav li:hover ul /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
#nav li:hover a /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#6b0c36;
text-decoration:underline;
#nav li:hover ul a /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
#nav li:hover ul li a:hover /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#333;
因此，通过使用嵌套的无序列表和一些 CSS，您可以制作一个有效的下拉菜单。在我看来，这是最好的解决方案。因为越简单的方法就能让事情变得更好。
有关下拉菜单的更多详细信息和完整说明和演示，请访问：http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
当然，您可以根据自己的喜好设置颜色和样式。
【讨论】：
非常感谢，但我的目的不是简单的菜单，像索尼和亚马逊这样的菜单可以下拉然后滑出 代码$("#hidden").hover.css('display', 'block')肯定不行，请修复。
哦..在您提到 Adobe 网站之前，它是不同的。所以你想要一个像这张图片中亚马逊网站上显示的行为吗？ i49.tinypic.com/10wv14i.jpg@ShinanTillTominaga
是的，喜欢你的图片.....基本上你可以在网上找到免费的 jquery 菜单，它们只是简单的下拉菜单，我找不到任何类似于索尼和亚马逊的东西...... .....
我发现了一些东西。我正在创建另一个答案。请检查@ShinanTillTominaga【参考方案4】：
如果您想要亚马逊上类似的弹出式垂直菜单，请查看此示例。很简单，只有html和css，没有jquery。看起来很像。
HTML：
<ul class="nav">
<li>
<a href="#">
<strong>MP3s & Cloud Player</strong> 18 million songs, play anywhere
</a>
</li>
<li>
<a href="#">
<strong>MP3s & Cloud Player</strong> 18 million songs, play anywhere
</a>
<ul>
<li>
<a href="#">
<strong>Your Cloud Drive</strong> Anythign digital, securely stored, available anywhere
</a>
</li>
<li>
<a href="#">
<strong>Learn more about cloud</strong> </a>
</li>
</ul>
<span class="cover"></span>
</li>
<li>
<a href="#">
<strong>Kindle</strong>
</a>
</li>
</ul>
CSS：
ul.nav
font-size: 10px;
font-family: Verdana, Helvetica;
width: 200px;
background: #edf7ff;
ul.nav li
padding: 5px 4px;
border: 1px solid #85abc9;
margin-bottom: -1px;
position: relative;
background: url(http://www.qualitymetric.com/Portals/0/images/orange_arrow.png) no- repeat 185px center;
ul.nav > li:hover
background: #fff;
border: 1px solid #999;
z-index:1;
box-shadow: 0px 1px 0px #999;
-moz-box-shadow: 0px 1px 0px #999;
ul.nav > li:hover > span
width: 5px;
height: 100%;
background: #fff;
position: absolute;
top: 0px;
bottom: 0px;
right: 15px;
z-index: 10;
ul.nav li a
color: #666;
text-decoration: none;
ul.nav li a strong
font-size: 11px;
color: #333;
font-weight: bold;
display: block;
/* dropdown */
ul.nav li ul
width: 200px;
padding-left: 12px;
background: #fff;
border: 1px solid #999;
position: absolute;
border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 1px 1px 0px #999;
-moz-box-shadow: 1px 1px 0px #999;
top: -1px;
left: 180px;
z-index: 9;
display: none;
ul.nav li:hover > ul
display: block;
ul.nav li ul li
border: none;
padding-left: 12px;
background: url(http://www.qualitymetric.com/Portals/0/images/orange_arrow.png) no- repeat 0px 6px;
ul.nav li ul li a strong
font-weight: normal;
color: #034995;
看这里的代码和演示：http://jsfiddle.net/blackpla9ue/KHLgm/8/ 您可以根据需要编辑和添加内容。
【讨论】：
哇，这也只是 css。非常感谢，我会抽时间看看！！ 很高兴你喜欢它。我认为这是一个很酷的。如果您满意，您可以投票支持我的回答。否则我会尽力为您提供进一步的帮助..jquery 还有其他方法，但我认为这个仅 css 的解决方案很棒，而且看起来也不错。 我累了，但它说我需要 15 名内部人员才能投票，我看错按钮了吗？ 您找对地方了，是的，由于声誉的原因，存在一些限制。我有时也有这个问题以上是关于如何确定实际悬停的元素的主要内容，如果未能解决你的问题，请参考以下文章