hover했을 때 보이게 하려면 어떤식으로 해야할까요?
안녕하세요. 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>
class 값 한 번에 부여하는법
2
80
1
@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.
1
69
1
div#css-checker-widget의 해결방
1
60
2
input의 포커스되었을때 검정선이 사라지지 않아요
0
79
2
강의듣는법
1
74
1
아코디언 만들기 100%이하의 화면으로 보았을때
1
68
2
input checked 질문합니다.
0
77
1
Bracket Pair Colorizer - 비주얼 스튜디오
1
140
2
Part 1 영상 안나옵니다
1
90
1
제이쿼리 작동이 안됩니다
1
199
3
강의 내용 질문있습니다.
1
120
2
일정 부분만 주석하는 방법
1
211
2
폰트어썸
1
134
2
인접선택자에 대한 질문드립니다!
1
129
2
delay 적용 안됨
1
135
1
rotateY(360deg)가 적용이 안됩니다!
1
186
2
세로이동할때 height값
1
139
2
폰트어썸이 안되요..
1
487
2
화면 정중앙에 오게끔 할수있나요?
1
169
1
어코디언 네비게이션 중
1
127
1
라이브서버 문제
1
230
2
넷플릭스 어코디언 예제 질문
1
105
1
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
1
158
1
active 관련 질문
1
147
2