изменение цвета кнопки закругленных углов с помощью CSS - PullRequest
Новая
       29

изменение цвета кнопки закругленных углов с помощью CSS

0 голосов
/ 14 сентября 2009

спасибо большое заранее!

Мне удалось сделать кнопку с закругленными углами, используя CSS. Мне нравится иметь возможность навести курсор мыши на кнопку, и вся вещь меняет свой цвет, а не только самый внутренний div. Пожалуйста, помогите!

Я предполагаю, что у меня должен быть какой-то javascript с onmouseover = "", верно?

вот эта страница: 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 -->

Ответы [ 2 ]

2 голосов
/ 14 сентября 2009

На сайте Stu Nicholls css play есть много примеров того, как это сделать без JavaScript. Это действительно отличный ресурс.

0 голосов
/ 19 сентября 2009

Я заменил внешний div ссылкой и добавил немного 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 */
...