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>

现在我想在鼠标悬停时更改背景颜色。任何帮助？

Answer 1

<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 */ }

Answer 2

选中此Demo

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

.divClass:hover{ background: red; }