Question

我有以下问题：

我有一个ul蓝色列表项文本和一个蓝色自定义项目符号。现在，如果用户单击li，则文本应为黑色，并且自定义项目符号也应为黑色。

文字很容易改变，但我不知道我怎么做，自定义子弹也保持黑色。

当用户通过菜单悬停时，自定义项目符号和文本变为黑色。这已经有效了。但是如果用户在页面上，那么当他离开悬停区域时，子弹再次变为蓝色。这不应该是这种情况。

这是我已经拥有的：

<ul class="listMenuItem--s">
                    <li class="listMenuChild">
                        <a href="#" class="listMenuChild--title active">Dienstleistungen</a>
                        <ul class="sub-nav">
                            <li><a href="service/treuhandf.html" class="listMenuChild--subtitle">Treuhand &amp; Finanzen </a></li>
                            <li><a href="service/wirtschaft.html" class="listMenuChild--subtitle">Wirtschaftsprüfung</a></li>
                            <li><a href="service/unternehmen.html" class="listMenuChild--subtitle">Unternehmensberatung / Nachfolge</a></li>
                            <li><a href="service/pension.html" class="listMenuChild--subtitle">Pensionierungs-, Vorsorge- und Steuerplanung</a></li>
                            <li><a href="service/informatik.html" class="listMenuChild--subtitle">Informatik</a></li>
                        </ul>
                    </li>
                    <li class="listMenuChild">
                        <a href="about.html" class="listMenuChild--title">Über uns</a>

                    </li>
                    <li class="listMenuChild">
                        <a href="publications.html" class="listMenuChild--title">Publikationen </a>

                    </li>
                    <li class="listMenuChild">
                        <a href="tools.html" class="listMenuChild--title">Hilfsmittel </a>

                    </li>
                    <li class="listMenuChild">
                        <a href="contact.html" class="listMenuChild--title">Kontakt / Lageplan </a></li>

</ul>

这里是CSS。

.listMenuChild {
    list-style-image: url("../img/bg_li.png");
    margin-top: 5%;
}

.listMenuChild:active {
    list-style-image: url("../img/bg_li_h.png");
}

.listMenuChild:hover {
    list-style-image: url("../img/bg_li_h.png");
}

是因为：active和：hover不能一起工作吗？

任何帮助非常感谢

Answer 1

如果您对:active等不可聚焦的项目有<li>课程，则该课程仅适用于mousedown。如果您需要在没有:hover的情况下使其正常工作，请使用tabindex使其专注。

<li class="listMenuChild" tabindex="0">

以上代码仅供其保留。即，目前浏览器仅对:active事件应用mousedown。所以只有当你同时拥有:hover:active伪类：

时才会发生这种情况

.listMenuChild:hover:active {backgkround: #999;}

Answer 2

:active表示“在点击或以其他方式激活时”（例如，当您有焦点时按Enter键时，也会激活可聚焦元素）。注意 while ，而不是之后。

它似乎对您没有任何影响，因为您从未在没有悬停的情况下激活它（并且您的悬停规则在活动规则之后出现）。

听起来就像当你说“当列表项处于活动状态时”时，你的意思是“当列表项中的链接具有解析为当前页面的URL的href属性时”。这不是你可以用CSS表达的东西。

使用服务器端代码根据您加载的页面向列表项添加类，并使用CSS定位该类。

Answer 3

当您为每个项目使用页面时，您可以创建另一个类，将其添加到每个页面的列表项中，其中该列表项将突出显示该页面：

| Doctor | Professor | Singer | Actor|

Jenny    Ashley     Meera  Jane

Samantha Christeen  Priya  Julia

NULL     Ketty      NULL   Maria

HTML示例：

SELECT *
FROM (
    SELECT 
        name,occupation
    FROM Occupations
) s
PIVOT
(
    max(name)
    FOR occupation IN (Doctor, Professor, Singer, Actor)
)pvt

Answer 4

尝试交换这两行：

.listMenuChild:hover {
    list-style-image: url("../img/bg_li_h.png");
}

.listMenuChild:active {
    list-style-image: url("../img/bg_li_h.png");
}

记住这个助记词：

L o V e和 H A te

4个伪选择器：

a:link      // **L**ove
a:visited   // Lo**V**e
a:hover     // **H**ate
a:active    // H**A**te

如果它们不符合特定顺序，它们可能无法正常工作。

https://css-tricks.com/remember-selectors-with-love-and-hate/

：自定义li标签项目符号的活动选择器

4 个答案: