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

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

단추 스타일을 지정하려면 호버, 활성 및 비활성화를 사용합니다.

그러나 문제는 버튼이 비활성화된 경우 호버 및 활성 스타일이 계속 적용된다는 것입니다.

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

:enabled pseudo-class를 사용할 수 있지만 알림에서 지원하지 않습니다.

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

사용 중인 경우LESS또는Sass사용해 볼 수 있습니다.

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

가장 가벼운 터치를 사용합니다. 규칙 순서를 통해 재정의합니다.

.btn {
  /* base styles */
}

.btn:hover {
  color: red;
}

.btn:active {
  color: green;
}

.btn:disabled {
  color: #aaa;
}

비결은 순서입니다. 모든 비장애인 상태를 먼저 적용하고, 모든 상태가 동일한 특수성을 가지고 있는지 확인하고, 마지막으로 동일한 특수성으로 비활성화합니다.

링크에 추가된 "사용할 수 없는" 클래스 또는 다음이 없는 비대화형 요소에는 사용할 수 없습니다.disabled소유물.

(높은 특수성 규칙을 제거하기 위해 편집됨)pointer-events)

인사말(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;
  }
}

제가 가장 간단한 방법 중 하나를 찾았을 때 저는 그것을 너무 찾고 있었습니다.

순수 CSS의 경우:

.button {
  background-color: #222222;
  color: #ffffff;
}

.button:hover {
  background-color: #111111;
}

.button:active {
  background-color: #000000;
}

.button:disabled {
  opacity: 0.5;
}

.button:disabled:hover {
  /*To see no effect except the disabled ones, resets the effects of hover to default of button*/
  background-color: #222222;
  color: #ffffff;
}

SCSS의 경우:

.button{
  background-color: #222222;
  color: ffffff;
  &:hover{
    background: #111111;
  }
  &:active{
    background: #000000;
  }
  &:disabled{
    opacity: 0.5;
    &:hover{
      /*To see no effect except the disabled ones, resets the effects of hover to default of button*/
      background-color: #222222;
      color: #ffffff;
    }
  }
}

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

저는 제 프로젝트에서 아래의 것을 사용합니다.

.bg-brand-3 {
  background-color: black;
  &[type="button"]:enabled {
    &:hover {
      background-color: orange;
    }
    &:active {
      background-color: green;
    }
  }
  &[type="submit"] {
    // css
  }
}

그:enable와 같은 의미입니다.:not(:disabled)

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