css 和 javascript onmouseover 类型效果答案

【问题标题】：css and javascript onmouseover type effectcss 和 javascript onmouseover 类型效果
【发布时间】：2010-11-06 20:30:41
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html css

【解决方案1】：

没有 JS，只有 CSS。看一下源码：http://www.seoconsultants.com/css/seo.css

/* Begin CSS Popout Menus at Left */
#menuleft ul li{position:relative;}
#menuleft li ul{position:absolute;left:180px;top:0;display:none;padding:0;}

div#menuleft ul li:hover ul{display:block;}

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

【讨论】：

【解决方案2】：

这是通过使用附加到父节点的 CSS 规则的 :hover CSS 属性来完成的。

考虑以下 HTML 代码：

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

你用下面的css代码实现了你提到的效果：

.parent .hiddenLabel {
    visibility: hidden;
}

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

这基本上告诉浏览器，当“父”节点上发生鼠标悬停事件时，CSS类为“hiddenLabel”的节点将出现在用户面前，当鼠标移出节点时消失。

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

这里有一篇关于伪选择器及其作用的精彩文章：http://css-tricks.com/pseudo-class-selectors/

【讨论】：

好的，我理解了你这里提到的这个小代码sn-p。谢谢...但是当我使用 ul-li 标签制作菜单（ans 子菜单）栏时我可以使用它吗
是的，:hover 选择器可以添加到任何可以包含在 CSS 选择器中的东西上。所以像： ul:hover li { visibility: visible; } 是完全合法的。我还添加了一个指向我的原始帖子的链接，该链接解释了所有伪选择器是什么。

【解决方案3】：

看看 jQuery 和一些插件。请参阅此站点以获取 jQuery 下拉插件列表。 http://www.1stwebdesigner.com/resources/38-jquery-and-css-drop-down-multi-level-menu-solutions/

【讨论】：

你应该这样做，它会让你的生活更美好:-)
为此使用 JQuery 不是很干净。