내가 사용하는 호버 , 활성버튼 스타일을 지정하기 및 비활성화 를 사용 합니다.
그러나 문제는 버튼이 비활성화되어 있으면 호버 및 활성 스타일이 여전히 적용됩니다.
활성화 된 버튼에만 호버를 적용하고 활성화하는 방법은 무엇입니까?
답변
: 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;
}답변
대부분의 최신 브라우저 (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 포인터 이벤트입니다)
답변
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;
}
}답변
당신이 사용하는 경우 LESS또는 Sass, 당신이 시도 할 수 있습니다 :
.btn {
&[disabled] {
opacity: 0.6;
}
&:hover, &:active {
&:not([disabled]) {
background-color: darken($orange, 15);
}
}
}답변
한 가지 방법은 css에서 버튼을 비활성화하고 해당 클래스의 호버 및 활성 상태를 재정의하면서 부분 클래스를 추가하는 것입니다. 또는 CSS에서만 해당 클래스의 호버 및 활성 의사 속성을 비활성화하고 지정할 때 클래스를 제거하십시오. 어느 쪽이든, CSS로 순수하게 수행 할 수는 없으므로 약간의 js를 사용해야합니다.
