Hover and Disabled at the same time

Question

Hover and Disabled at the same time

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have 2 buttons. One I want to be disabled and the other is hover effect. When I do this way below the two buttons are hover effect.

How do I make the button that is disabled have no effect?

.btn-destaque{
    padding: 25px 15px 25px 15px;
    background-color: #7857a5;
    color: white;
    border: 1px solid #8c37ff;
}
.btn-destaque:disabled{
    background-color: #b3a4c7;
    cursor: not-allowed;
    border: 1px solid #b3a4c7;
}
.btn-destaque:hover{
    background-color: #8c37ff;
}

<button type="button" class="btn-destaque disabled" disabled="disabled">Teste</button>
<button type="button" class="btn-destaque">Teste</button>

html css

asked by anonymous 18.07.2017 / 15:46

2 answers

1

You can use :not(:disabled) in CSS.

.btn-destaque {
    padding: 25px 15px 25px 15px;
    background-color: #7857a5;
    color: white;
    border: 1px solid #8c37ff;
}

.btn-destaque:disabled {
    background-color: #b3a4c7;
    cursor: not-allowed;
    border: 1px solid #b3a4c7;
}

.btn-destaque:not(:disabled):hover {
    background-color: #8c37ff;
}

<button type="button" class="btn-destaque disabled" disabled="disabled">Teste</button>
<button type="button" class="btn-destaque">Teste</button>

18.07.2017 / 15:51

How do I get the value of a checkbox with javascript and move to another page? Error using GROUP via LINQ

score 1 · Accepted Answer

You can use not() to apply the hover only to elements that have the class .btn-destaque that do not have the disabled attribute:

.btn-destaque {
  padding: 25px 15px 25px 15px;
  background-color: #7857a5;
  color: white;
  border: 1px solid #8c37ff;
}

.btn-destaque:disabled {
  background-color: #b3a4c7;
  cursor: not-allowed;
  border: 1px solid #b3a4c7;
}

.btn-destaque:not([disabled]):hover {
  background-color: #8c37ff;
}

<button type="button" class="btn-destaque disabled" disabled="disabled">Teste</button>
<button type="button" class="btn-destaque">Teste</button>