I am trying to make a simple button that changes appearance when clicked, in a toggle fashion. I use a class defining the general appearance of the button (.button), a class defining the base look of this specific button (.hire) and a class defining the changes when the button has been clicked once (.hired).

I use JS to add the .hired class and everything works perfectly until I hover over the button. The .hired class is added and the default rule for that class is applied. However, the .hired:hover rule isn't applied and doesn't even show up when I inspect the element, when the other hover rules are there.

I am genuinely confused as to what could be causing this one hover rule to be utterly ignored.

Here's the CSS:

    .button {
        color: white;
        font-size: 16px;
        font-weight: bold;
        background: rgb(202, 67, 1);
        border: none;
        border-radius: 5px;
        padding: 10px;
        transition: background .2s;
    }
    
    .button:hover {
        background: rgb(138, 46, 1);
        cursor: pointer;
    }
    
    .hire {
        position: absolute;
        top: 15px;
        right: 15px;
        line-height: 32px;
        text-align: center;
        width: 100px;
        border: 2px solid rgb(202, 67, 1);
        transition: border .2s;
    }
    
    .hire:hover{
        border: 2px solid rgb(138, 46, 1);
    }
    
    .hired {
        background-color: transparent;
        color: rgb(202, 67, 1);
        transition: color .2s;
    }
    
    .hired:hover {
        background: rgba(0, 0, 0, 0);
        color: rgb(138, 46, 1);
    }

EDIT: I eventually found a solution, although I didn't fix the issue. Copying the hover rule in a separate style section in the HTML head instead of importing it did the trick. However I still don't understand what the underlaying issue was and it is definitely still there, hidden behind my hack.

CodePudding user response：

The CSS hover rules are not applied on element inspection in Chrome (at least for me). This might be a bug in Chrome. Apparently, the rules are applied when you edit the CSS file and re-upload it. So, in order to check CSS hover rules, upload your CSS file and edit the file, then re-upload it and also :hover pseudo-class doesn't work in the inspector. This means that, for example, if you are trying to use hover on an element to change its background color, you won't see the results of that on the element's inspector. The element's background will be the same color as its regular, non- :hover background.

You can also try this -add display: block in your CSS rule. This will set the position to block and the element will then be positioned relative to the block it is in.

CodePudding user response：

everything works perfectly until I hover over the button.

The .hired class is added and the default rule for that class is applied.

However, the .hired:hover rule isn't applied

I had a go at reproducing your setup - and it looks like it works fine and that you've done everything correctly.

Please ask in the comments below if you have any further questions.

Working Example:

const hireButton = document.querySelector('.hire.button');

const clickHireButton = (e) => {

  e.target.classList.add('hired');
}

hireButton.addEventListener('click', clickHireButton, false);

.button {
  color: white;
  font-size: 16px;
  font-weight: bold;
  background: rgb(202, 67, 1);
  border: none;
  border-radius: 5px;
  padding: 10px;
  transition: background .2s;
}
    
.button:hover {
  background: rgb(138, 46, 1);
  cursor: pointer;
}
    
.hire {
  position: absolute;
  top: 15px;
  right: 15px;
  line-height: 32px;
  text-align: center;
  width: 100px;
  border: 2px solid rgb(202, 67, 1);
  transition: border .2s;
}
    
.hire:hover{
  border: 2px solid rgb(138, 46, 1);
}
    
.hired {
  background-color: transparent;
  color: rgb(202, 67, 1);
  transition: color .2s;
}
    
.hired:hover {
  background: rgba(0, 0, 0, 0);
  color: rgb(138, 46, 1);
}

<button  type="button" />Click Me</button>