: hover에 반대되는 CSS 의사 클래스가 있습니까?
지정할 CSS에 의사 클래스가 있습니까?
:not(:hover)
아니면 그것이 호버링되지 않는 항목을 지정하는 유일한 방법입니까?
여러 CSS3 참조를 살펴 봤는데 : hover의 반대를 지정하는 CSS 의사 클래스에 대한 언급이 없습니다.
예, 사용합니다 :not(:hover)
.child:not(:hover){
opacity: 0.3;
}
또 다른 예; 나는 당신이 원한다고 생각한다 : "하나를 가리키면 다른 모든 요소를 어둡게" .
내 가정이 맞고 모든 선택기가 동일한 부모 안에 있다고 가정하면 :
.parent:hover .child{
opacity: 0.2; // Dim all other elements
}
.child:hover{
opacity: 1; // Not the hovered one
}
.child{
display:inline-block;
background:#000;
border:1px solid #fff;
width: 50px;
height: 50px;
transition: 0.4s;
}
.parent:hover .child{
opacity: 0.3;
}
.parent .child:hover{
opacity: 1;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
그렇지 않으면 ... 단순히 기본 로직을 사용하십시오.
.child{
opacity: 0.2;
}
.child:hover{
opacity: 1;
}
There isn't such a pseudo-class. There doesn't need to be, when you can just use :not(:hover). The whole point of the :not() pseudo-class is to allow authors to write negations without having to specify separate negations of every existing (and future) dynamic pseudo-class where an element can only either match or not match the pseudo-class.
For example, only some elements can either be :enabled or :disabled — most elements are neither because the semantics simply don't apply — but an element can only either be designated by the pointing device (:hover), or not (:not(:hover)). Providing negations that can already directly be achieved using :not() would greatly undermine its usefulness (though it could still be used to negate any other simple selector — or entire complex selectors down the road).
The argument that such a pseudo-class would be computationally less expensive is pretty weak. The most naïve implementation of such a pseudo-class would be a literal :not(:hover) check, which would be no better. Any more complex or optimized implementations and you're asking vendors to implement a pseudo-class that is either as fast as or even faster than :not(:hover), something that's already uncommon enough of a use case considering the other options you have such as cascading and :not(:hover) (for whenever cascading isn't an option) that you readily have access to. It simply doesn't justify the time and effort to spec, implement and test an alternative to at least one other existing method that is 100% functionally equivalent (and one that applies to at least 80% of scenarios). And there's also the issue of naming such a pseudo-class — you haven't proposed a name for it, and I can't think of a good one either. :not-hover is only shorter by two bytes and only marginally less work to type. If anything, it's potentially more confusing than :not(:hover).
If you are worried about specificity, note that the :not() pseudo-class itself is not counted for specificity; only its most specific argument is. :not(:hover) and :hover are equally specific. So specificity is not an issue either.
If you are worried about browser support, such a pseudo-class, if introduced, would likely have either been introduced alongside :not(), or in a later level of Selectors, since it didn't appear in CSS2 (where :hover was first introduced more than 17 years ago, and first implemented in IE4 another year yet before). Introducing it in a later level would be pointless because authors would simply be forced to continue using :not(:hover) until browsers begin implementing this new pseudo-class anyway, and they would have no reason to switch.
Note that this isn't the same as the following question, which talks about events vs states (it's originally about :focus rather than :hover, but the same principle applies): Does CSS have a :blur selector (pseudo-class)?
a {
/*styles*/
}
is a normal (non hovered link)
a:hover {
/*styles*/
}
is a hovered link
참고URL : https://stackoverflow.com/questions/30835168/is-there-an-opposite-css-pseudo-class-to-hover
'IT TIP' 카테고리의 다른 글
| Moq'ing 방법 어디서 표현 (0) | 2020.12.08 |
|---|---|
| pip를 사용하여 사용 가능한 Python 패키지를 검색하려면 어떻게해야합니까? (0) | 2020.12.08 |
| Angular 5의 헤더에 CORS 요청을 추가하는 방법 (0) | 2020.12.08 |
| NoRouteToHostException을 피하는 방법? (0) | 2020.12.08 |
| Javascript / jQuery를 사용하여 외부 스타일 시트에서 CSS 값 가져 오기 (0) | 2020.12.08 |