display 속성의 값 중 하나인 none을 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#answer{
display: none;
}
/*
1. id가 question인 요소 위에 마우스를 올리면
=> #question:hover
2. 옆에 있는 id가 answer인 요소가 보이도록
=> +#answer
*/
#question:hover+#answer{
display:inline;
}
</style>
</head>
<body>
<h3>Quiz!</h3>
<span id="question">Q. 여러분은 비오는 거 좋아하시나요?</span>
<span id="answer">A. 아뇨.</span>
</body>
</html>
요소를 안 보이게 하는 none.
'Front-End > CSS' 카테고리의 다른 글
| [CSS] Ex11_padding.html (0) | 2023.06.12 |
|---|---|
| [CSS] Ex10_margin.html (0) | 2023.06.12 |
| [CSS] Ex08_display.html (0) | 2023.06.11 |
| [CSS] Ex07_크기단위.html (0) | 2023.06.11 |
| [CSS] Ex06_Font.html (0) | 2023.06.11 |
