用CSS改变圆角按钮的颜色

Question

提前谢谢大家！

我能够使用 CSS 制作一个圆角按钮。我喜欢能够将鼠标悬停在按钮上，整个东西都会改变其颜色，而不仅仅是最里面的 div。请帮忙！

我的假设是 iam 应该有一些带有 onmouseover="" 的 javascript，对吗？

这是页面：http://biozenconsulting.com/new/

（另外，我如何摆脱在 IE8 和 Chrome 中查看时出现在右上角的小框？）

这是 HTML 代码：

<div class="nav_menu" onclick="location.href='index.htm'">
    <b class="top_menu"><b class="top_menu1"><b></b></b><b class="top_menu2"><b></b></b><b class="top_menu3"></b><b class="top_menu4"></b><b class="top_menu5"></b></b>
    <div class="top_menufg">
        <!-- content goes here -->
        Home
    </div>
    <b class="top_menu"><b class="top_menu5"></b><b class="top_menu4"></b><b class="top_menu3"></b><b class="top_menu2"><b></b></b><b class="top_menu1"><b></b></b></b>
</div>

这是 CSS：

.nav_menu {
    text-align: center;
    color: #353535;
    font-size: 20pt;
    font-family: Verdana, Geneva, sans-serif;
    float: left;
    width: 33%;
}

#about {
    margin: 0 .5% 0 .5%;
}

<!-- For rounded boxes -->
.top_menu {
    display:block
    overflow: hidden;
}
.top_menu *{
    display:block;
    height:1px;
    overflow:hidden;
    font-size:.01em;
    background:#AAAAAA
}

.top_menu1{
    margin-left:3px;
    margin-right:3px;
    padding-left:1px;
    padding-right:1px;
    border-left:1px solid #AAAAAA;
    border-right:1px solid #AAAAAA;
    background:#AAAAAA
}
.top_menu2{
    margin-left:1px;
    margin-right:1px;
    padding-right:1px;
    padding-left:1px;
    border-left:1px solid #AAAAAA;
    border-right:1px solid #AAAAAA;
    background:#AAAAAA
}
.top_menu3{
    margin-left:1px;
    margin-right:1px;
    border-left:1px solid #AAAAAA;
    border-right:1px solid #AAAAAA;
}
.top_menu4{
    border-left:1px solid #AAAAAA;
    border-right:1px solid #AAAAAA
}
.top_menu5{
    border-left:1px solid #AAAAAA;
    border-right:1px solid #AAAAAA
}
.top_menufg{
    background:#AAAAAA
}
.top_menufg:hover{
    background-color: #888888;
    cursor: pointer;
}
<!-- For rounded boxes -->

Answer 1

Stu Nicholls 的网站 css play 有很多关于如何在不使用 JavaScript 的情况下执行此操作的示例。这真是一个非常好的资源。

Answer 2

我用链接替换了外部 div，并添加了一些 CSS。

HTMLCSS

<a class="nav_menu" href="index.htm">
 <b class="top_menu"><b class="top_menu1"><b></b></b><b class="top_menu2"><b></b></b><b class="top_menu3"></b><b class="top_menu4"></b><b class="top_menu5"></b></b>
 <div class="top_menufg">
  <!-- content goes here -->
  Home
 </div>
 <b class="top_menu"><b class="top_menu5"></b><b class="top_menu4"></b><b class="top_menu3"></b><b class="top_menu2"><b></b></b><b class="top_menu1"><b></b></b></b>
</a>

​

.nav_menu {
 text-align: center;
 color: #353535;
 font-size: 20pt;
 font-family: Verdana, Geneva, sans-serif;
 float: left;
 width: 33%;
 text-decoration: none;
}
/* For rounded boxes */
.top_menu {
 display:block
 overflow: hidden;
}    
.top_menu * {
 display:block;
 height:1px;
 overflow:hidden;
 font-size:.01em;
 background:#AAAAAA
}    
.top_menu1 {
 margin-left:3px;
 margin-right:3px;
 padding-left:1px;
 padding-right:1px;
 border-left:1px solid #AAAAAA;
 border-right:1px solid #AAAAAA;
 background:#AAAAAA
}
.top_menu2 {
 margin-left:1px;
 margin-right:1px;
 padding-right:1px;
 padding-left:1px;
 border-left:1px solid #AAAAAA;
 border-right:1px solid #AAAAAA;
 background:#AAAAAA
}
.top_menu3 {
 margin-left:1px;
 margin-right:1px;
 border-left:1px solid #AAAAAA;
 border-right:1px solid #AAAAAA;
}
.top_menu4 {
 border-left:1px solid #AAAAAA;
 border-right:1px solid #AAAAAA
}
.top_menu5 {
 border-left:1px solid #AAAAAA;
 border-right:1px solid #AAAAAA
}
.top_menufg {
 background:#AAAAAA
}
a.nav_menu:hover b, a.nav_menu:hover div  {
 background-color: #888888;
 cursor: pointer;
}
/* For rounded boxes */