How do I combine active button and hover?

Question

I want to make a darker color then button class is already active and when I hover on it with a mouse like shown on the screenshot. Which CSS style code should I write to make a darker color then two conditions are fulfilled? Thanks.

Manon · Accepted Answer · 2020-01-09T18:32:47.280

3

You can combine a .active class with a :hover pseudo-class in your CSS code like below. The .active class will darken the element and the :hover combined to .active will darken it even more.

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>

edited Jan 09 '20 at 18:32

answered Jan 09 '20 at 18:26

Manon

319
1
8

He/She is a new programmer, i dont think showing him jqeury will help him. – Morris Jan 09 '20 at 18:29
It worked, many thanks! – Floyd1337 Jan 09 '20 at 18:32
This could be accomplished in vanilla javascript without the unnecessary jQuery! – Brady Ward Jan 09 '20 at 18:34
1

I'm sorry, the jQuery was only here to provide a better snippet. I've edited my answer, hoping my explanations are enough to understand that selectors can be combined in CSS (see the CSS part of the snippet) – Manon Jan 09 '20 at 18:35

score 0 · Answer 2 · edited Jan 09 '20 at 18:26

0

if you want to change the color of the button while your mouse is on it try this

html =

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

then you put this in your css to make it do something when you hover on it

css =

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

this is a easy way to do it, there are way more of these functions you can try, such as :visited

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

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

edited Jan 09 '20 at 18:26

Sun

84
7

answered Jan 09 '20 at 18:22

Morris

169
12

I didn't mean that. The button is already activated and gray, I want to hover It and it gets grayer then two conditions are fulfilled. – Floyd1337 Jan 09 '20 at 18:26

score 0 · Answer 3 · answered Jan 09 '20 at 18:23

suppose we have the following html code

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

the css should be

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

}

score -1 · Answer 4 · answered Jan 09 '20 at 18:26

.class:hover:active { //rules }

But most of the time, you wouldn't want to use a pseudo class like :active to achieve the desired style since :active only applies to html that's being clicked. You may have to add an additional class by javascript (for example: 'active, etc') and then use CSS to apply the "triggered" class like so.

.class.active:hover { //rules }

How do I combine active button and hover?

4 Answers4