css 에서. 같은 단계? 레벨? 선택을 어찌 하나요?
본문
<a href="" class="img">
<img src="1.jpg" class="img_1">
<img src="1_over.jpg" class="img_1_over">
</a>
img_1_over 에 hover 했을 때 img_1 에 border 를 주려 합니다.
(img_1_over 은 position absolute 로 img_1 위에 있는 상태 입니다)
.img img.img_1_over:hover "여기에 뭔가" img.img_1 { border: 2px;}
여기에 뭔가는 뭘까요? + ~ parent 도 넣어 봣는데 작동을 않하네요.
아예 잘못된 인자인지...
답변 1
대부분.. 위 같은 경우는.. JS로 하죠..
js 를 사용 하기 싫다 하시는 경우
.img 에 hover 를 줘서... .img_1_over 건 .img_1 이건 .img 건 일단 hover 되면 .img 에 보더를 주고
.img_1 hover시에.. border 를 빼는 css 를 hover 이후에 추가해서 오버라이딩을 하시거나
.img_1 를 .img_1_over 다음 라인에 위치시켜. 다음 형제 선택자를 사용해서 보더를 주거나.
.img_1을 .img_1_over 의 자식 노드로 만들어서. 선택 가능하게 하거나.
등 방법을 사용 하시면 어찌어찌 깔끔하지는 않지만 비슷한 느낌으로는 가능 하긴 합니다.
답변을 작성하시기 전에 로그인 해주세요.