تغيير لون زر زوايا مدورة مع CSS

Question

وبفضل حفنة مقدما!

وكنت قادرا على جعل زر الزاوية مقربة باستخدام CSS. أحب أن تكون قادرة على تمرير الماوس على الزر، والأمر برمته يتغير لونه، وليس فقط داخل معظم شعبة. بلز مساعدة!

وبلدي الافتراض هو أن إدارة الهوية والولوج من المفترض أن يكون بعض جافا سكريبت كيندا مع onmouseover = "" صحيح؟

وهنا الصفحة: http://biozenconsulting.com/new/

و(أيضا، كيف يمكنني التخلص من المربعات الصغيرة التي تظهر على الزوايا اليمنى عند عرضها في IE8 وكروم؟)

وهذا هو رمز 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

وأنا محل شعبة الخارجي مع وصلة وأضاف قليلا من CSS.

وHTML

<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>

وCSS

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

Answer 2

وموقع ستو نيكولز في المغلق لعب لديها الكثير من الأمثلة على كيفية القيام بذلك دون جافا سكريبت. انها مورد ممتازة حقا.