如何结合活动按钮和悬停？ [复制]答案

【问题标题】：How do I combine active button and hover? [duplicate]如何结合活动按钮和悬停？ [复制]
【发布时间】：2020-04-27 09:51:01
【问题描述】：

我想制作一个更深的颜色，然后按钮类已经处于活动状态，当我用鼠标悬停在它上面时，如屏幕截图所示。如果满足两个条件，我应该编写哪个 CSS 样式代码来使颜色变深？谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

您可以在 CSS 代码中将 .active 类与 :hover 伪类结合起来，如下所示。 .active 类将使元素变暗，:hover 与 .active 组合会使元素变暗。

button.active{
  background-color:#aaa;
}
button.active:hover{ /* combine two conditions */
  background-color:#999;
}

<button type="button" class="active">An active button</button>
<button type="button" class="">A normal button</button>

【讨论】：

【解决方案2】：

如果你想在鼠标悬停时更改按钮的颜色，试试这个

html =

<div class="container"
<a href ="#">  Hover me </a>
</div>

然后你把它放在你的css中，让它在你悬停在它上面时做一些事情

css =

.container a:hover{
    background: #ddd;
}

这是一种简单的方法，您可以尝试更多这些功能，例如:visited

.container a:hover{
    background: #ddd;
}

<div class="container">
<a href ="#">  Hover me </a>
</div>

【讨论】：

【解决方案3】：

.class:hover:active { //rules }

但大多数时候，您不希望使用像 :active 这样的伪类来实现所需的样式，因为 :active 仅适用于被点击的 html。您可能需要通过 javascript 添加一个额外的类（例如：'active, etc'），然后使用 CSS 来应用“触发”类，就像这样。

.class.active:hover { //rules }

【讨论】：

【解决方案4】：

假设我们有以下 html 代码

<ul>
  <li>Lorem Ipsum</li>
  <li class="active">Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
</ul>

css应该是

li:hover{
    background-color: rgba(0,0,0,0.2);
}
li.active{
    background-color: rgba(0,0,0,0.5);
}
li.active:hover{

}

【讨论】：