웹 기초 - hover

hover

• hover : 마우스를 해당 엘리먼트에 올리면 내가 지정한 것으로 올릴 때만 변경해준다.

문제1

• 파란색 블록에 마우스를 올렸을 때 빨간색이 되도록 만들기

HTML
<div></div>

CSS
/* 그냥 div */
div {
  width:100px;
  height:100px;
  background-color:red;
}

div {
  background-color:blue;
}
/* hover된 div*/
div:hover{
  background-color: red;
}

---

문제2

• 100칸짜리 바둑판을 만들고 하나의 칸에 마우스를 올리면 해당 칸의 배경색이 바뀌도록 만들기

HTML
div*100

CSS
div {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
}
div:hover{
  background-color: blue;
}

결과