html - 如何结合活动按钮和悬停？

Question

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

Answer 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>

Answer 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>

Answer 3

假设我们有以下 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{

}

Answer 4

.class:hover:active { //rules }

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

.class.active:hover { //rules }