반응형
1. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>롤오버 효과주기</title>
<link href="css/ex04.css" rel="stylesheet">
</head>
<body>
<h2>롤오버 효과주기</h2>
<dl>
<dt>daum</dt>
<dd>다음</dd>
<dt>naver</dt>
<dd>네이버</dd>
<dt>nate</dt>
<dd>네이트</dd>
</dl>
<div>
<span>다음</span>
<span>daum</span>
</div>
<div>
<span>네이버</span>
<span>naver </span>
</div>
</body>
</html>
2. CSS Code
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
body{
font-family:sans-serift, "맑은 고딕";
font-size:14px;
color:black;
}
ul, li{
list-style:none;
}
a{
text-decoration:none;
color:black;
}
/* 롤오버 효과주기 */
dl dt,dl dd{
float:left;
width:80px;
height:50px;
border:1px solid red;
}
dl dd{
display:none;
}
dl dt:hover+dd{
display:block;
}
div{
width:100px;
height:50px;
border:1px solid blue;
/* 줄바꾸기 */
clear:both;
}
div>span:nth-child(1){
display:block;
}
div>span:nth-child(2){
display:none;
}
div:hover>span:nth-child(1){
display:none;
}
div:hover>span:nth-child(2){
display:block;
}
div{
display:inline-block;
}
3. HTML / CSS 파일
ex04.html
0.00MB
ex04.css
0.00MB
4. 미리보기
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190615 Basic Study 39(우엉조림 메뉴 만들기) (0) | 2019.06.15 |
|---|---|
| HTML5 - 190615 Basic Study 38(아이콘 리스트 예제) (0) | 2019.06.15 |
| HTML5 - 190615 Basic Study 36(가로 네비게이션 바) (0) | 2019.06.15 |
| HTML5 - 190615 Basic Study 35(스프라이트 메뉴) (0) | 2019.06.15 |
| HTML5 - 190615 Basic Study 34(배경 속성 이해하기) (0) | 2019.06.15 |
