Question

我知道#holder ul.sub表示包含子类的所有ul元素都在css中具有id持有者的div中，但这是什么：

#menuOuter li:hover ul.sub li.current a {margin-top:200px; height:40px;}

其余的css代码中没有current类，只有这一个：

<li class="sub-li p1 current"><a class="a1" href="#url"><img src="hover-grow/pic1.jpg" />

以及current如何从sub-li p1移至sub-li p2或sub-li p3或sub-li p4？我认为应该有一个javascript函数，但没有。提前感谢您的回答

Answer 1

好的，li:hover表示当鼠标悬停在列表项上时，<a>内li.current内的ul.sub的样式已更改。有一个.current，因为当你有类似class="sub-li p1 current之类的东西时，这些空格正在分隔类名。所以li实际上有3个不同的类，而不仅仅是1.希望这是有道理的！

Answer 2

在此之前，请关闭代码中的a和li标记，如下所示：

<li class="sub-li p1 current"><a class="a1" href="#url"><img src="hover-grow/pic1.jpg" /></a></li>

这可以通过两种方式完成：

JavaScript方式（无页面刷新）

如果您希望在没有页面刷新的情况下使用此功能，则addClass场景中的事件会触发典型的removeClass - jQuery。换句话说，您需要JavaScript将类当前从一个元素转移到另一个元素。我已经删除了标记并使用了jQuery，以便尽可能简单地演示解决方案：

<强>标记：

<ul id="menu">
    <li class="current"><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">item 5</a></li>
</ul>

<强> jQuery的：

$(document).ready(function() {
    $('#menu li').click(function(e) {
        if (!$(this).hasClass('current')) {
            $(this).addClass('current').siblings().removeClass('current');
            // do other stuff
        }
        e.preventDefault();
    });
});

Check this jsfiddle。您必须使用控制台日志来查看从一个项目移动到另一个项目的类。

申请方式（取决于打开的页面）

如果您的应用程序根据您所在的页面设置菜单的状态，则由您的应用程序（而不是javascript）将类current分配给菜单项，如果用户在这页纸。在wordpress中它看起来像这样：

<li <?php if (is_category('cars') { ?>class="current"<?php } ?>><a href="/cars">Cars</a></li>

Answer 3

鉴于您的标记和样式表片段，应该存在以下元素以使这些样式有效：

id="menuOuter"的东西，可能是托管下一个要求的育儿（无序）列表，
在该列表中，当前悬停的列表项（li:hover），
在该列表项中，包含class="sub"（ul.sub）的无序列表，
在该列表中，列有class="current"的列表项，这将是您的标记显示的列表项（li.current），
在该列表项中，可以获得边距和高度的锚点（a），即：该锚点需要显示为块或内联块元素。

因此，这些样式设置可以使用的唯一方法是所有这些元素都存在时，如this demo fiddle所示：

标记：

<ul id="menuOuter">
    <li>
        <ul class="sub">
            <li class="sub-li p1 current">
                <a class="a1" href="#"><img src="hover-grow/pic1.jpg" /></a>
            </li>
        </ul>
    </li>
</ul>

样式表：

#menuOuter li:hover ul.sub li.current a {
    margin-top:200px;
    height:40px;
}
a {
    display: block;
}

通常，列表项使用php，asp或asp.net获取current类服务器端，使用JavaScript代码获取客户端，以确定元素是否为 current 。此外，.current没有CSS样式是完全正常的，因为通常它的唯一目的是指示元素是否处于当前状态。

请指导我这个CSS语法？

3 个答案:

JavaScript方式（无页面刷新）

申请方式（取决于打开的页面）