인프런 커뮤니티 질문&답변
작성한 질문수
hover했을 때 보이게 하려면 어떤식으로 해야할까요?
해결된 질문
작성
·
1.1K
1
안녕하세요. checked 메뉴 예제 3,4번을 약간 응용해서
예제 설명 때 말씀해주신 쇼핑몰처럼 한번 만들어보고 싶었는데요
우선 강의에서처럼 1,2,3번 요소가 있고 브라우저 새로고침시 1번 요소는 우선 기본적으로 checked되어 있지만
2,3번 요소로 hover했을 때 요소가 변하도록 하고 싶어요.
단순히 hover과 checked를 섞어서 쓰면 될 줄 알았는데,
어떻게 해야할지 모르겠더라고요.. 1번 요소에 기본적으로 checked를 주고 2,3번 요소는 hover을 주면
1번 요소는 계속해서 checked로 남아있어서요
약간 조건문처럼 1번요소는 기본적으로 checked, background red로 되어있고(새로고침시)
이외에 hover했을 때는 위의 조건은 소멸되고 background red로 변하고 이미지 변하게끔 하고 싶어요
어떻게 해야할까요? 감사합니다.
답변 2
1
hover로 탭메뉴를 만드려면 제이쿼리 또는 자바스크립트를 이용해야 합니다.
jquery tab menu content hover codepen 이런 식으로 검색해 보셔야 할 것 같습니다.
0
우선 제가 했던 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;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>form Example 2</title>
</head>
<body>
<div class="tapmenu">
<input type="radio" name="tap" id='tap1' checked>
<input type="radio" name="tap" id='tap2'>
<input type="radio" name="tap" id='tap3'>
<div class="images">
<span><a href='#none01'><img src="img/slide-01.jpg"></a></span>
<span><a href='#none02'><img src="img/slide-02.jpg"></a></span>
<span><a href='#none03'><img src="img/slide-03.jpg"></a></span>
</div>
<div class="btn">
<label for="tap1"></label>
<label for="tap2"></label>
<label for="tap3"></label>
</div>
</div>
</body>
</html>
아하 감사합니다!