본문 바로가기

Python_WEB/HTML

HTML5 - 190615 Basic Study 37(롤 오버 효과 주기)

반응형

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. 미리보기

반응형