css hover opacity
-
게시물 수정 , 삭제는 로그인 필요
안녕하세요 웹디자인 공부를 하면서 웹을 하나 만들어보려고 하는데 문제가 생겼습니다. 첫 번째 사진에서 html이라는 글자 네모칸에 마우스를 가져다 대면 두 번째 사진처럼 그 칸이 검정색으로 되고 글자도 흰색으로 바뀌면서 옆에 여러 네모들이 나오게 하고 싶었거든요.
그래서
html은
<body>
<div class="top">
<p>웹 디자인 개념 정리</p>
</div>
<nav class="nav1">
<ul>
<li class="nav1_1"><a href="html">HTML</a></li>
<li class="nav1_2"><a href="css">CSS</a></li>
<li class="nav1_3><a href="java">JAVA SCRIPT</a></li>
</ul>
</nav>
<nav class="nav2">
<ul>
<li>HTML 기본 문서</li>
<li>웹 문서 내용</li>
<li>입력 양식</li>
</ul>
</nav>
<nav class="nav3">
<ul>
<li>CSS 기본</li>
<li>텍스트 표현</li>
<li>박스 모델</li>
<li>배경</li>
<li>고급 선택자</li>
<li>트렌지션과 <br>애니메이션</li>
<li>반응형 웹과 <br>미디어 쿼리</li>
</ul>
</nav>
<nav class="nav4">
<ul>
<li>자바스크립트</li>
<li>기본 문법</li>
<li>함수와 이벤트</li>
<li>객체</li>
<li>문서 객체 모델</li>
</ul>
</nav>
</body>
이렇게 썼고
css는
<style>
body { margin: 0; }
.top {
width: 100vw;
height: 38px;
border: 2px solid #000;
font-size: 17pt;
}
.top p { margin: 0; }
.nav1 {
float: left;
position: relative;
top: -2px;
}
.nav1 ul {
width: 175px;
list-style: none;
margin: 0;
padding: 0;
}
.nav1 ul li {
height: 59px;
border : 2px solid #000;
border-bottom: none;
font-size: 15pt;
text-align: center;
line-height: 59px;
}
.nav1 li:last-child {
border-bottom: 2px solid #000;
}
.nav2 {
position: absolute;
left: 173px;
top: 40px;
}
.nav2 ul {
width: 183px;
list-style: none;
margin: 0;
padding: 0;
}
.nav2 ul li {
height: 104px;
border: 2px solid #000;
border-bottom: none;
font-size: 15pt;
text-align: center;
opacity: 0;
}
.nav2 li:last-child {
border-bottom: 2px solid #000;
}
.nav3 {
position: absolute;
left: 173px;
top: 40px;
}
.nav3 ul {
width: 183px;
list-style: none;
margin: 0;
padding: 0;
}
.nav3 ul li {
height: 104px;
border: 2px solid #000;
border-bottom: none;
font-size: 15pt;
text-align: center;
opacity: 0;
}
.nav3 li:last-child {
border-bottom: 2px solid #000;
}
.nav4 {
position: absolute;
left: 173px;
top: 40px;
}
.nav4 ul {
width: 183px;
list-style: none;
margin: 0;
padding: 0;
}
.nav4 ul li {
height: 104px;
border: 2px solid #000;
border-bottom: none;
font-size: 15pt;
text-align: center;
opacity: 0;
}
.nav4 li:last-child {
border-bottom: 2px solid #000;
}
.nav1_1:hover, .nav1_1:focus {
background-color: #000;
color: #fff;
}
.nav1_1:hover .nav2 ul li {
opacity: 1;
}
.nav1_1:active {
background-color: #000;
color: #fff;
}
</style>
</head>
이렇게 썼어요.
nav2부터 4까지 opacity를 0으로 한 다음
nav1_1에 가져다 대면 opacity가 1로 바뀌도록 적었는데
nav2가 안나타나고 반응도 없이 그냥 html이라는 박스에 검정색만 뜨네요.
도저히 해결이 안되서 여쭤봅니다,,,,
안녕하세요 웹디자인 공부를 하면서 웹을 하나 만들어보려고 하는데 문제가 생겼습니다. 첫 번째 사진에서 html이라는 글자 네모칸에 마우스를 가져다 대면 두 번째 사진처럼 그 칸이 검정색으로 되고 글자도 흰색으로 바뀌면서 옆에 여러 네모들이 나오게 하고 싶었거든요.
그래서
html은
<body>
<div class="top">
<p>웹 디자인 개념 정리</p>
</div>
<nav class="nav1">
<ul>
<li class="nav1_1"><a href="html">HTML</a></li>
<li class="nav1_2"><a href="css">CSS</a></li>
<li class="nav1_3><a href="java">JAVA SCRIPT</a></li>
</ul>
</nav>
<nav class="nav2">
<ul>
<li>HTML 기본 문서</li>
<li>웹 문서 내용</li>
<li>입력 양식</li>
</ul>
</nav>
<nav class="nav3">
<ul>
<li>CSS 기본</li>
<li>텍스트 표현</li>
<li>박스 모델</li>
<li>배경</li>
<li>고급 선택자</li>
<li>트렌지션과 <br>애니메이션</li>
<li>반응형 웹과 <br>미디어 쿼리</li>
</ul>
</nav>
<nav class="nav4">
<ul>
<li>자바스크립트</li>
<li>기본 문법</li>
<li>함수와 이벤트</li>
<li>객체</li>
<li>문서 객체 모델</li>
</ul>
</nav>
</body>
이렇게 썼고
css는
<style>
body { margin: 0; }
.top {
width: 100vw;
height: 38px;
border: 2px solid #000;
font-size: 17pt;
}
.top p { margin: 0; }
.nav1 {
float: left;
position: relative;
top: -2px;
}
.nav1 ul {
width: 175px;
list-style: none;
margin: 0;
padding: 0;
}
.nav1 ul li {
height: 59px;
border : 2px solid #000;
border-bottom: none;
font-size: 15pt;
text-align: center;
line-height: 59px;
}
.nav1 li:last-child {
border-bottom: 2px solid #000;
}
.nav2 {
position: absolute;
left: 173px;
top: 40px;
}
.nav2 ul {
width: 183px;
list-style: none;
margin: 0;
padding: 0;
}
.nav2 ul li {
height: 104px;
border: 2px solid #000;
border-bottom: none;
font-size: 15pt;
text-align: center;
opacity: 0;
}
.nav2 li:last-child {
border-bottom: 2px solid #000;
}
.nav3 {
position: absolute;
left: 173px;
top: 40px;
}
.nav3 ul {
width: 183px;
list-style: none;
margin: 0;
padding: 0;
}
.nav3 ul li {
height: 104px;
border: 2px solid #000;
border-bottom: none;
font-size: 15pt;
text-align: center;
opacity: 0;
}
.nav3 li:last-child {
border-bottom: 2px solid #000;
}
.nav4 {
position: absolute;
left: 173px;
top: 40px;
}
.nav4 ul {
width: 183px;
list-style: none;
margin: 0;
padding: 0;
}
.nav4 ul li {
height: 104px;
border: 2px solid #000;
border-bottom: none;
font-size: 15pt;
text-align: center;
opacity: 0;
}
.nav4 li:last-child {
border-bottom: 2px solid #000;
}
.nav1_1:hover, .nav1_1:focus {
background-color: #000;
color: #fff;
}
.nav1_1:hover .nav2 ul li {
opacity: 1;
}
.nav1_1:active {
background-color: #000;
color: #fff;
}
</style>
</head>
nav2부터 4까지 opacity를 0으로 한 다음
nav1_1에 가져다 대면 opacity가 1로 바뀌도록 적었는데
nav2가 안나타나고 반응도 없이 그냥 html이라는 박스에 검정색만 뜨네요.
도저히 해결이 안되서 여쭤봅니다,,,,
#css hover #css hover 효과 모음 #css hover 효과 #css hover 제거 #css hover 애니메이션 #css hover 반대 #css hover 다른 클래스 #css hover 이미지 바꾸기 #css hover transition #css hover 사용법
