用CSS圆角按钮改变颜色 [英] changing color of rounded corners button with CSS

查看：154 发布时间：2016/8/16 21:30:40 html css button mouseover rounded-corners

本文介绍了用CSS圆角按钮改变颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

感谢一群提前！

我是能够使用CSS圆角按钮。我希望能够到鼠标悬停的按钮，整个事情改变其颜色，而不仅仅是最内层的div。 plz帮助！

我的假设是，IAM应该有一些还挺用的onmouseover的JavaScript =，是否正确？

这里的页面： http://biozenconsulting.com/new/

（还，我怎么摆脱那个出现在IE8和Chrome看时，右上角的小盒子？）

这是HTML code：

 ＆LT; DIV CLASS =nav_menu的onclick =location.href ='index.htm的'＆GT;
    ＆LT; B类=top_menu＆GT;＆LT; B类=top_menu1＆GT;＆LT; B＆GT;＆LT; / B＆GT;＆LT; / B＆GT;＆LT; B类=top_menu2＆GT;＆LT; B＆GT;＆LT; / b＆GT;＆LT; / b＆GT;＆LT; b类=top_menu3＆GT;＆LT; / b＆GT;＆LT; b类=top_menu4＆GT;＆LT; / b＆GT;＆LT; b类=top_menu5＆GT;＆LT; / b＆GT;＆LT; / b＆GT;
    ＆LT; DIV CLASS =top_menufg＆GT;
    ＆LT;！ - 内容放在这里 - ＆GT;
    家
    ＆LT; / DIV＆GT;
    ＆LT; B类=top_menu＆GT;＆LT; B类=top_menu5＆GT;＆LT; / B＆GT;＆LT; B类=top_menu4＆GT;＆LT; / B＆GT;＆LT; B类=top_menu3＆GT; ＆LT; / b＆GT;＆LT; b类=top_menu2＆GT;＆LT; b＆GT;＆LT; / b＆GT;＆LT; / b＆GT;＆LT; b类=top_menu1＆GT;＆LT; b＆GT;＆LT; / b＆GT;＆LT; / b＆GT;＆LT; / b＆GT;
＆LT; / DIV＆GT;

和这里的CSS：

  .nav_menu {
    文本对齐：中心;
    颜色：＃353535;
    字体大小：20pt;
    FONT-FAMILY：宋体，日内瓦，无衬线;
    浮动：左;
    宽度：33％;
}＃关于 {
    保证金：0 5.5％0 5.5％;
}＆LT;！ - 对于圆角盒 - ＆GT;
.top_menu {
    显示：块
    溢出：隐藏;
}
.top_menu * {
    显示：块;
    高度：1px的;
    溢出：隐藏;
    字体大小：.01em;
    背景：#AAAAAA
}.top_menu1 {
    保证金左：的3px;
    保证金右：的3px;
    填充左：1px的;
    填充右：1px的;
    左边框：1px的固体#AAAAAA;
    右边框：1px的固体#AAAAAA;
    背景：#AAAAAA
}
.top_menu2 {
    保证金左：1px的;
    保证金右：1px的;
    填充右：1px的;
    填充左：1px的;
    左边框：1px的固体#AAAAAA;
    右边框：1px的固体#AAAAAA;
    背景：#AAAAAA
}
.top_menu3 {
    保证金左：1px的;
    保证金右：1px的;
    左边框：1px的固体#AAAAAA;
    右边框：1px的固体#AAAAAA;
}
.top_menu4 {
    左边框：1px的固体#AAAAAA;
    右边框：1px的固体#AAAAAA
}
.top_menu5 {
    左边框：1px的固体#AAAAAA;
    右边框：1px的固体#AAAAAA
}
.top_menufg {
    背景：#AAAAAA
}
.top_menufg：悬停{
    背景颜色：＃888888;
    光标：指针;
}
＆LT;！ - 对于圆角盒 - ＆GT;

解决方案

我替换一个链接外层div并添加CSS一点点。

HTML

 ＆LT;一类=nav_menu的href =index.htm的＆GT;
 ＆LT; B类=top_menu＆GT;＆LT; B类=top_menu1＆GT;＆LT; B＆GT;＆LT; / B＆GT;＆LT; / B＆GT;＆LT; B类=top_menu2＆GT;＆LT; B＆GT;＆LT; / b＆GT;＆LT; / b＆GT;＆LT; b类=top_menu3＆GT;＆LT; / b＆GT;＆LT; b类=top_menu4＆GT;＆LT; / b＆GT;＆LT; b类=top_menu5＆GT;＆LT; / b＆GT;＆LT; / b＆GT;
 ＆LT; DIV CLASS =top_menufg＆GT;
  ＆LT;！ - 内容放在这里 - ＆GT;
  家
 ＆LT; / DIV＆GT;
 ＆LT; B类=top_menu＆GT;＆LT; B类=top_menu5＆GT;＆LT; / B＆GT;＆LT; B类=top_menu4＆GT;＆LT; / B＆GT;＆LT; B类=top_menu3＆GT; ＆LT; / b＆GT;＆LT; b类=top_menu2＆GT;＆LT; b＆GT;＆LT; / b＆GT;＆LT; / b＆GT;＆LT; b类=top_menu1＆GT;＆LT; b＆GT;＆LT; / b＆GT;＆LT; / b＆GT;＆LT; / b＆GT;
＆所述; / A＆GT;

CSS

  .nav_menu {
 文本对齐：中心;
 颜色：＃353535;
 字体大小：20pt;
 FONT-FAMILY：宋体，日内瓦，无衬线;
 浮动：左;
 宽度：33％;
 文字修饰：无;
}
/ *对于圆角盒* /
.top_menu {
 显示：块
 溢出：隐藏;
}
.top_menu * {
 显示：块;
 高度：1px的;
 溢出：隐藏;
 字体大小：.01em;
 背景：#AAAAAA
}
.top_menu1 {
 保证金左：的3px;
 保证金右：的3px;
 填充左：1px的;
 填充右：1px的;
 左边框：1px的固体#AAAAAA;
 右边框：1px的固体#AAAAAA;
 背景：#AAAAAA
}
.top_menu2 {
 保证金左：1px的;
 保证金右：1px的;
 填充右：1px的;
 填充左：1px的;
 左边框：1px的固体#AAAAAA;
 右边框：1px的固体#AAAAAA;
 背景：#AAAAAA
}
.top_menu3 {
 保证金左：1px的;
 保证金右：1px的;
 左边框：1px的固体#AAAAAA;
 右边框：1px的固体#AAAAAA;
}
.top_menu4 {
 左边框：1px的固体#AAAAAA;
 右边框：1px的固体#AAAAAA
}
.top_menu5 {
 左边框：1px的固体#AAAAAA;
 右边框：1px的固体#AAAAAA
}
.top_menufg {
 背景：#AAAAAA
}
a.nav_menu：悬停B，a.nav_menu：悬停DIV {
 背景颜色：＃888888;
 光标：指针;
}
/ *对于圆角盒* /

thanks a bunch in advance!

i was able to make a rounded corner button using CSS. i like to be able to mouseover the button, and the entire thing changes its color, not just the inner most div. plz help!

my assumption is that iam supposed to have some kinda javascript with onmouseover="", correct?

here's the page: http://biozenconsulting.com/new/

(also, how do i get rid of the small boxes that appear on the right corners when viewed in IE8 and Chrome?)

this is the HTML code:

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

and here's the 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 -->

解决方案

I replaced the outer div with a link and added a little bit of 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 */

这篇关于用CSS圆角按钮改变颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

用CSS圆角按钮改变颜色 [英] changing color of rounded corners button with CSS

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

用CSS圆角按钮改变颜色 [英] changing color of rounded corners button with CSS

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭