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

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

---

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

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

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

---

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

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

---

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

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

---

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

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

---

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

---

대부분의 최신 브라우저 (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;
}

The pointer-events: none rule will disable hover; you won't need to raise specificity with a .btn[disabled]:hover selector to nullify the hover style.

(FYI, this is the simple HTML pointer-events, not the contentious abstracting-input-devices pointer-events)

---

If you are using LESS or Sass, You can try this:

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

---

One way is to add a partcular class while disabling buttons and overriding the hover and active states for that class in css. Or removing a class when disabling and specifying the hover and active pseudo properties on that class only in css. Either way, it likely cannot be done purely with css, you'll need to use a bit of js.

참고URL : https://stackoverflow.com/questions/11600687/hover-and-active-only-when-not-disabled