HTML5 : 마우스 오버시 둥근 사각형의 색 변경

Question

html5에서 둥근 사각형을 만들었습니다. 다음은 코드입니다.

<div style="position:absolute; width:148px; height:44px; left:90px; -webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px; border:2px solid #FFFFFF; background-color:#4D0C00; cursor:pointer; top: 98px;"> </div> 

이제 mouseover에서 배경색을 변경하고 싶습니다. 어떤 도움 ??

Answer 1

확인이 Demo

<div class="divClass"> </div> 

.divClass:hover{ background: red; } 

Answer 2

<div style="position:absolute; width:148px; height:44px; left:90px; -webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px; border:2px solid #FFFFFF; background-color:#4D0C00; cursor:pointer; top: 98px;"> </div> 

변경이 코드. 인라인 스타일을 사용하지 않는 것이 좋습니다.

<div class="myDiv"> </div> 

인라인 스타일 대신 CSS 클래스를 만듭니다.

.myDiv{position:absolute;width:148px;height:44px; left:90px; -webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px; border:2px solid #FFFFFF; background-color:#4D0C00; cursor:pointer; top: 98px;} 

.myDiv:hover{background-color:#FF0000; /* put your color here */ }