css和javascript onmouseover类型效应

Question

当我访问一些站点并在一些菜单项上使用鼠标指针时，另一个子菜单项出现在另一个靠近主菜单项的面板中。这样就产生了像onmouseover一样的效果。但是当我看到源代码(比如IE中的View源代码选项)时，菜单项列表元素中没有定义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规则的:悬浮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;
}

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

这是实现此效果的最佳实践，因为在页面上开始运行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/