CSS选择器Java服务器面对标签

Question

我正在实现jsf标签(commandLinks)下拉列表。

我对jsf中的css选择器有疑问。

当我将鼠标悬停在commandLink类"about"上时，我想将其他2个commandLink的字体颜色更改为红色。

这是我的尝试:

css文件

.about:hover .sub{
    color: red;
}

<h:commandLink styleClass="about" value="About us ▾" action="/about"/>
<h:commandLink styleClass="sub" value="test1"    action="/customers"/>
<h:commandLink styleClass="sub" value="test2" action="/license" />

但是没有改变。我也试过这个

.about:hover > .sub{
    color: red;
}

Answer 1

你的菜单中缺少了一些东西，你需要理解父/子概念。css选择器.about .sub将选择具有父about的子sub。在您的情况下，您根本没有层次结构。

几乎所有的菜单都使用这个简单的概念:

<ul>
    <li class="about">
        <h:commandLink value="About us ▾" action="/about"/>
        <ul class="sub">
            <li><h:commandLink value="test1" action="/customers"/></li>
            <li><h:commandLink value="test2" action="/license" /></li>
        </ul>
    </li>
    <!-- ... other top level menus ... -->
</ul>

现在你的css选择器可以工作了:

.about:hover > .sub {
    color: red;
}