gpt4 book ai didi

css - 通配符覆盖所有其他设置

转载 作者:太空宇宙 更新时间:2023-11-04 09:22:06 25 4
gpt4 key购买 nike

我是 CSS 新手。教程告诉我,css 文件上部定义的设置会被下面定义的设置覆盖。现在我尝试为我的整个页面创建一个自定义光标,它在单击链接时会显示动画。我的代码如下所示:

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

...

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

但这行不通。 * 部分中定义的光标有效,但如果我单击菜单链接,光标不会改变。如果我删除 * 部分并添加以下代码:

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

它有效,但“dartpfeil.cur”光标仅在悬停链接时显示。我也试过了

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

但是光标也只能通过悬停链接来显示。我想在整个页面上使用“dartpfeil.cur”,就好像它是在 * 中定义的一样,但我还想在链接处于事件状态时使用“dartpfeil_steckt.cur”。这个问题有什么可能的解决方案吗?

谢谢并祝大家新年快乐!

编辑: 代码错误已修复
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>

最佳答案

为什么它不起作用是因为你的 divactive 元素并且 div 响应 :active 类它需要tabindex

我为 News 链接 div 添加了 tabindex(和一个额外的 CSS 规则),所以你可以看到它是如何工作的,我还删除了 Über uns 链接上的 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;
}
<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 tabindex="0" class="menuElementRed">News</div></a>
<p class="verticalBorder"></p>
<a href="">&Uuml;ber uns</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>

关于css - 通配符覆盖所有其他设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41418910/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com