css和javascript onmouseover类型效果

当我访问一些站点并将鼠标指针指向某个菜单项时，另一个子菜单项出现在主菜单项旁边的另一个面板中。从而产生一种类似于onmouseover的效果。但是当我看到源代码（如IE中的View source选项）时，菜单项列表元素中没有定义onmouseover/onmouseout事件

例如，在网站http://www.seoconsultants.com/-将鼠标指针移到左侧面板或网站上的搜索引擎优化搜索上http://www.znetindia.com在顶部菜单栏上选择鼠标指针电子邮件选项

---

如何使用css和javascript获得这样的效果。

看看jQuery和一些插件。有关jQuery下拉插件的列表，请参见此站点

没有JS，只有CSS。请看一下源代码：

---

基本上可以说：“当鼠标悬停在父列表元素上时，子列表应该是可见的。”

这是通过使用附加到父节点CSS规则的：hover CSS属性来实现的

考虑以下HTML代码：

<div class="parent">
 <span class="label">Always on!</span>
 <span class="hiddenLabel">Show on Mouse</span>
</div>

这基本上告诉浏览器，当鼠标悬停事件发生在“父”节点上时，CSS类为“hiddenLabel”的节点将向用户显示，当鼠标离开节点时，这些节点将消失

这是实现此效果的最佳实践，因为javascript在页面上开始运行所需的加载时间和处理时间比加载的CSS要长

---

下面是一篇关于伪选择器及其功能的精彩文章：

您应该这样做，它会让您的生活变得更好：-）使用JQuery进行此操作不会很干净。好的，我理解了您在这里提到的这个小代码段。谢谢但是，当我使用ulli标记创建菜单（ans子菜单）栏时，是否可以使用此选项？：hover选择器可以添加到CSS选择器中包含的任何内容。所以像：ul:hover li{visibility:visible；}这样的东西是完全合法的。我还添加了一个链接到我的原始帖子，解释了所有的伪选择器是什么。

<div class="parent">
 <span class="label">Always on!</span>
 <span class="hiddenLabel">Show on Mouse</span>
</div>

.parent .hiddenLabel {
    visibility: hidden;
}

.parent:hover .hiddenLabel {
    visibility: visible;
}