Question

我正在使用jsf标签（commandLinks）实现一个下拉列表。

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

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

这是我的尝试：

在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将选择包含父级sub的子级about。在您的情况下，您根本没有等级。

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

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

css selector java server faces标签

1 个答案: