비활성화되지 않은 경우에만 호버 및 활성

186

내가 사용하는 호버 , 활성버튼 스타일을 지정하기 및 비활성화 를 사용 합니다.

그러나 문제는 버튼이 비활성화되어 있으면 호버 및 활성 스타일이 여전히 적용됩니다.

활성화 된 버튼에만 호버를 적용하고 활성화하는 방법은 무엇입니까?

css

— 알리
소스

329

: enabled 의사 클래스를 사용할 수 있지만 주의 사항 IE<9은 지원하지 않습니다 .

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

— 공학자
소스

3

:not()셀렉터 도 있지만 IE9 이후로만 지원됩니다. 참조 : developer.mozilla.org/en-US/docs/Web/CSS/:not

— jnns

button:hover:enabled내 경우에는 작동하지 않는 것 같습니다. IE11에서 IE9 에뮬레이션 사용

— Neolisk

75

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

당신은 이것을 시도 할 수 있습니다 ..

— Velayutham Anjamani
소스

"호버 비활성화 됨"상태가 "호버링 비활성화 됨"상태와 동일하게 보이도록하려는 경우에 적합한 솔루션입니다.

— Mikhael Loo

나는 <3이 해결책이다. : not (.no-hover)를 사용하여 <button class = "button"> 마우스 </ button> 및 <button class = "button no-hover> 호버하지 않음 </ button>

— Ben

35

CSS에서 "disabled"속성을 사용하지 않는 이유는 무엇입니까? 모든 브라우저에서 작동해야합니다.

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

— 마 데프
소스

13

한 줄에서 모두 선택하여 비활성화 된 모든 상태를 커버하십시오..button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active {}

— DBK

13

대부분의 최신 브라우저 (IE11 + 및 일부 모바일 Opera & IE 브라우저 제외)에서 작동하는 낮은 특이성 접근 방식 ( http://caniuse.com/#feat=pointer-events ) :

.btn {
  /* base styles */
}

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

.btn:hover {
  color: red;
}

이 pointer-events: none규칙은 호버를 비활성화합니다. .btn[disabled]:hover호버 스타일을 무효화 하기 위해 선택기를 사용하여 특수성을 높일 필요는 없습니다 .

(참고로, 이것은 논쟁적인 추상 입력 장치 포인터 이벤트가 아닌 간단한 HTML 포인터 이벤트입니다)

— 미 차이
소스

12

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;
  }
}

— 제이크 포커
소스

10

당신이 사용하는 경우 LESS또는 Sass, 당신이 시도 할 수 있습니다 :

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

— fatlinesofcode
소스

차단하지 않은 상태로 래핑하지 않는 한 비활성화 된 버튼에 대해 호버 효과가 처리되므로 SASS에서 유용한 솔루션입니다.

— mbokil

2

한 가지 방법은 css에서 버튼을 비활성화하고 해당 클래스의 호버 및 활성 상태를 재정의하면서 부분 클래스를 추가하는 것입니다. 또는 CSS에서만 해당 클래스의 호버 및 활성 의사 속성을 비활성화하고 지정할 때 클래스를 제거하십시오. 어느 쪽이든, CSS로 순수하게 수행 할 수는 없으므로 약간의 js를 사용해야합니다.

— 기술
소스