질문&답변
hover했을 때 보이게 하려면 어떤식으로 해야할까요?
우선 제가 했던 css, html코드 첨부합니다(checked가 아닌 제가 질문글에 올린 의도대로 수정해서 해보았던 거예요!) 문제점은 1번째 요소에 계속해서 빨간색으로 버튼이 칠해져있다는 겁니다.. 그냥 hover로 해결할 수 있긴한데 그러면 기본적으로 첫번째 요소에 hover되어 있게 어떻게 해야하나요??(checked자리에 hover넣으면 될줄 알았는데 안돼더라고요.) @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap'); body { font-family: 'Nanum Gothic', sans-serif; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; background-color: #f8f9fa; } .tapmenu { width: 300px; height: 330px; position: relative; } input { display: none; } .images span{ position: absolute; top:0; left:0; transition: .5s; opacity:0; visibility: hidden; } .btn { position: absolute; bottom: 0; width: 300px; height: 20px; text-align: center; } .btn label { display: inline-block; width: 20px; height: 20px; background-color: grey; margin-right: 5px; border-radius: 50%; transition: .3s; } input[id=tap1]:checked ~ .btn label[for=tap1] { background-color: red; } input[id=tap2]:hover ~ .btn label[for=tap2] , input[id=tap3]:hover ~ .btn label[for=tap3] { background-color: red; } input[id=tap1]:checked ~ .images span:nth-child(1) { opacity:1; visibility: visible; } input[id=tap2]:hover ~ .images span:nth-child(2) , input[id=tap3]:hover ~ .images span:nth-child(3) { opacity:1; visibility: visible; } form Example 2
- 좋아요수
- 1
- 댓글수
- 2
- 조회수
- 1227