가짜 요소의 의사 클래스

Question

분명히 좋겠지 만 CSS의 (가상) 개시를 시도하지는 않습니다. 의사 요소에 의사 클래스를 추가 할 수 있는지 확인하고 싶었습니다. 예 :

.some-class:after:hover { 
} 

아니요.

.some-class:hover:after { 
} 

을 그리고 당연히,이하지 않는 :

이 비록 작동 내가 사업부가 IS-할 노력하고 무엇

.some-class:hover:after:hover { 
} 

. 해당 div에 마우스를 가져 가면 다음을 사용하여 삭제 아이콘을 첨부합니다. div에있는 후. 이 아이콘의 스타일을 지정하고 싶습니다 (예 : 1.1 정도 확대). 순전히 CSS에서 가능합니까? Chrome에서 작동하기 만하면됩니다.

Answer 1

아니요, 현재 표준에서는 의사 클래스를 가상 요소에 연결할 수 없습니다. 가상 엘레멘트가 나타날 수있는 유일한 장소는 복합 선택자의 맨 끝에 있으며 다른 선택자 또는 연결자는 그 뒤에 나타날 수 없습니다. spec을 참조하십시오.

WebKit과 같은 일부 구현에는 자체 규칙이 있지만 비표준이며 크로스 브라우저를 사용하지 않습니다. 또한 모든 의사 클래스 및/또는 모든 유사 요소에 적용되지 않을 수도 있습니다. 예를 들어, 알고있는 한, :after:hover은 Chrome 브라우저에서 작동하지 않습니다.

어느 쪽이든, 의사 요소 대신 실제 요소를 사용해야합니다.

Answer 2

은 이미 당신은 당신의 컨테이너 요소 내부에 추가 요소, 당신이 원하는 그렇다면 :after상의 :hover 의사를 첨부 할 수없는 것을 @BoltClock로 둥지를 할 수 있습니다에 대한 답변과 원하는 효과를 얻을 수 있습니다.

div { 
 
    height: 300px; 
 
    width: 300px; 
 
    border: 1px solid tomato; 
 
    margin: 20px; 
 
    position: relative; 
 
} 
 

 
div span { 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
div:hover span { 
 
    display: block; 
 
    transition: font-size .5s; 
 
} 
 

 
div span:hover { 
 
    font-size: 20px; 
 
}

<div> 
 
    <span>X</span> 
 
</div>

이것은 당신이 페이지에 자바 스크립트를 사용하지 않고 효과를 원하는 줄 것이다,이의 아래쪽은 당신이 어떤 액세스 할 수없는, 그래서 만약 여분의 요소를 가질 필요가 있다는 것입니다 또는 HTML을 수정할 수있는 권한이 있으면 자바 스크립트를 사용하여 요소를 추가 할 수있는 경우를 제외하고는 그렇지 않습니다.