Question

我是CSS的新手。教程告诉我，css文件上部定义的设置将被下面定义的设置覆盖。现在我尝试为整个页面创建一个自定义光标，在点击链接时进行动画制作。我的代码如下所示：

* {
    cursor:    url("../dartpfeil.cur"), auto;
}

...

.menu a:active {
    cursor:    url("../dartpfeil_steckt.cur"), auto;
}

但这不起作用。 *部分中定义的光标有效，但如果单击菜单链接，则光标不会改变。如果我删除*部分并添加以下代码：

.menu a:hover {
    cursor:    url("../dartpfeil.cur"), auto;
}

它有效，但是＆＃34; dartpfeil.cur＆＃34;光标仅通过悬停链接显示。我也试过

*:hover {
    cursor:    url("../dartpfeil.cur"), auto;
}

但是光标也只能通过悬停链接来显示。我想使用＆＃34; dartpfeil.cur＆＃34;在整个页面上，好像它是在*中定义的，但我也想要＆＃34; dartpfeil_steckt.cur＆＃34;链接处于活动状态。有没有解决这个问题的方法？

谢谢，祝大家新年快乐！

编辑：代码修复错误
EDIT2：根据要求，下面是html代码：

<html>
    <head>
        <title>Dartverein XY</title>        

        <link rel="stylesheet" href="style.css" />
    </head> 
    <body>
        <a href="index.php" id="headerLink">
            <section id="header">
                <div id="title">Steeldartverein<br>M&uuml;hldorf e.V.</div>     
            </section>
        </a>

        <div class="horizontalBorder"></div>

        <section class="menu">
            <p class="verticalBorder"></p>
            <a href=""><div class="menuElementRed">News</div></a>
            <p class="verticalBorder"></p>
            <a href=""><div class="menuElementGreen">&Uuml;ber uns</div></a>
            <p class="verticalBorder"></p>
            <a href=""><div class="menuElementRed">Weiteres</div></a>
            <p class="verticalBorder"></p>
            <a href=""><div class="menuElementGreen">Login</div></a>
            <p class="verticalBorder"></p>
            <p class="lastVerticalBorder"></p>
        </section>

        <div class="horizontalBorder"></div>


    </body>
</html>

Answer 1

为什么它不起作用是因为div是活动元素，div响应它需要的:active类tabindex。

我为新闻链接tabindex添加了div（和一个额外的CSS规则），以便您了解该工作的方式，并且我还删除了{{1在Überuns链接上，现在一个也工作

div

* {
    cursor:    url("../dartpfeil.cur"), auto;
  color: lime;
}
.menu a:active {
    cursor:    url("../dartpfeil_steckt.cur"), auto;
  color: red;
}
.menu a div:active {
  cursor:    url("../dartpfeil_steckt.cur"), auto;
  color: red;
}

Answer 2

＆＃34; dartpfeil_steckt.cur＆＃34;为。。。工作 *？您的代码看起来很好，它应该覆盖通配符，因为它更具体。我最好的猜测是你错放了文件，或拼错了文件名。

通配符会覆盖所有其他设置

2 个答案: