Passe o mouse e Ativo apenas quando não estiver desativado

186

Eu uso o cursor do mouse , ativo e desativado para estilizar os botões.

Mas o problema é que, quando o botão é desativado, o foco e os estilos ativos ainda se aplicam.

Como aplicar o foco e ativo apenas nos botões ativados?

css

— Todos
fonte

329

Você pode usar : pseudo classe habilitada , mas o aviso IE<9não a suporta :

button:hover:enabled{
    /*your styles*/
}
button:active:enabled{
    /*your styles*/
}

— Engenheiro
fonte

3

Há também o :not()seletor, mas, novamente, só é suportado desde o IE9. Veja: developer.mozilla.org/pt-BR/docs/Web/CSS/:not

— jnns

button:hover:enablednão parecia funcionar no meu caso. Usando a emulação IE9 no IE11.

— Neolisk 3/03

75

.button:active:hover:not([disabled]) {
    /*your styles*/
}

Você pode tentar isso ..

— Velayutham Anjamani
fonte

Essa é uma boa solução para quando você deseja que o estado "desabilitado por passar o mouse" pareça idêntico ao estado "desabilitado sem passar o mouse".

— Mikhael Loo

Eu <3 esta solução. permite que eu tenha o seguinte: <button class = "button"> passa o mouse </button> e <button class = "button no-hover> não passa o mouse </button> usando apenas: not (.no-hover)

— Ben

35

Por que não usar o atributo "disabled" em css. Isso deve funcionar em todos os navegadores.

button[disabled]:hover {
    background: red;
}
button:hover {
    background: lime;
}

— Madef
fonte

13

Cobrir todos os estados desativados, selecionando-os todos em uma linha:.button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active {}

— DBK

13

Uma abordagem com especificidade mais baixa que funciona nos navegadores mais modernos (IE11 + e excluindo alguns navegadores Opera e IE móveis - http://caniuse.com/#feat=pointer-events ):

.btn {
  /* base styles */
}

.btn[disabled]
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.btn:hover {
  color: red;
}

A pointer-events: noneregra desabilitará o foco; você não precisará aumentar a especificidade com um .btn[disabled]:hoverseletor para anular o estilo de foco.

(Para sua informação, estes são os eventos-ponteiro HTML simples, não os eventos-ponteiro contenciosos de dispositivos de entrada de abstração)

— michai
fonte

12

Em sass (scss):

 button {
  color: white;
  cursor: pointer;
  border-radius: 4px;

  &:disabled{
    opacity: 0.4;

    &:hover{
      opacity: 0.4;  //this is what you want
    }
  }

  &:hover{
    opacity: 0.9;
  }
}

— jakeforaker
fonte

10

Se você estiver usando LESSou Sass, você pode tentar o seguinte:

.btn {
  &[disabled] {
    opacity: 0.6;
  }
  &:hover, &:active {
    &:not([disabled]) {
      background-color: darken($orange, 15);
    }
  }
}

— fatlinesofcode
fonte

Essa é uma boa solução no SASS, pois o efeito de foco será processado para um botão desativado, a menos que você o envolva em nenhum bloco.

— mbokil 27/01

2

Uma maneira é adicionar uma classe partcular ao desativar botões e substituir os estados de foco e ativo dessa classe em css. Ou removendo uma classe ao desativar e especificar as propriedades de foco e pseudo ativo nessa classe apenas em css. De qualquer forma, provavelmente não pode ser feito apenas com css, você precisará usar um pouco de js.

— techfoobar
fonte