gpt4 book ai didi

html - 专门针对 :hover overriding the an equivalent class for :active 的元素

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

我有代码让背景的字体颜色分配给一个类,然后有单独的类来更改 :hover 或 :active 上的颜色,但 :active 状态不会触发,除非我删除 :hover 特定类。 CODEPEN

HTML:

<div class="backgroundRed backgroundGreenHover backgroundBlueActive" style="width: 100px; height: 100px;"></div>

CSS:

.backgroundRed, .backgroundRedHover:hover, .backgroundRedActive:active{background:red;}
.backgroundGreen, .backgroundGreenHover:hover, .backgroundGreenActive:active{background:green;}
.backgroundBlue, .backgroundBlueHover:hover, .backgroundBlueActive:active{background:blue;}

最佳答案

:active 伪类应该放在 :hover 之后,否则 :hover 会覆盖(链接相关伪类的顺序类是::link | :visited | :hover | :active。)。您的代码示例按预期工作,但如果您更改类,:active 伪类将永远不适用。

.backgroundRed,
.backgroundRedHover:hover,
.backgroundRedActive:active {
background: red;
}

.backgroundGreen,
.backgroundGreenHover:hover,
.backgroundGreenActive:active {
background: green;
}

.backgroundBlue,
.backgroundBlueHover:hover,
.backgroundBlueActive:active {
background: blue;
}
<div class="backgroundRed backgroundBlueHover backgroundGreenActive" style="width: 100px; height: 100px;"></div>

您需要更多 CSS 行,但在 :hover 之后使用 :active 重新排序类可以正常工作。

.backgroundRed,
.backgroundRedHover:hover {
background: red;
}

.backgroundGreen,
.backgroundGreenHover:hover {
background: green;
}

.backgroundBlue,
.backgroundBlueHover:hover {
background: blue;
}

.backgroundRedActive:active {
background: red;
}

.backgroundGreenActive:active {
background: green;
}

.backgroundBlueActive:active {
background: blue;
}
<div class="backgroundRed backgroundBlueHover backgroundGreenActive" style="width: 100px; height: 100px;"></div>

关于html - 专门针对 :hover overriding the an equivalent class for :active 的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38527925/

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