Question

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

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

如何使用css和javascript获得此类效果。

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

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

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

Answer 3

看看jQuery和一些插件。有关jQuery下拉插件的列表，请访问此站点。 http://www.1stwebdesigner.com/resources/38-jquery-and-css-drop-down-multi-level-menu-solutions/

css和javascript onmouseover类型的效果

3 个答案: