<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 반응선택자 : 사용자의 반응으로 생성되는 특정한 상태를 선택 */
div {
color: green;
}
/* 마우스 올린 태그 선택 => hover */
div:hover {
color: red;
}
/* 마우스 클릭한 태그 선택 => active */
div:active {
background-color: yellow;
}
/* h3 요소에 마우스 올렸을 때
p요소 배경색 변경 */
h3:hover+p {
background-color: blueviolet;
}
/* h3요소에 마우스 클릭했을 때
p요소에 밑줄 생성 */
h3:active+#underline {
background-color: aquamarine;
text-decoration: underline;
}
</style>
</head>
<body>
<div>Hello World</div>
<h3>반응선택자 실습</h3>
<p id="underline">월요일</p>
</body>
</html>
댓글