我写了一个菜单类,默认颜色是#029BD5。使用Html方法,我让菜单选项在鼠标经过时改变颜色。
<style type="text/css">
.over {background-color:white;}
.out {background-color:#029BD5;}
</style>
<html>
<input type="button" style="height:30px;width:200px;position:absolute;
left:150px;top:3px" onmouseover="this.className='over';"
onmouseout="this.className='out';" onmousedown="this.className='down';"
onmouseup="this.className='up';" value="Menu Option 1"
onclick="this.value='Option 1 Selected'" />
<input type="button" style="height:30px;width:200px;position:absolute;
left:150px;top:33px" onmouseover="this.className='over';"
onmouseout="this.className='out';" onmousedown="this.className='down';"
onmouseup="this.className='up';" value="Menu Option 2"
onclick="this.value='Option 2 Selected'" />
<input type="button" style="height:30px;width:200px;position:absolute;
left:150px;top:63px" onmouseover="this.className='over';"
onmouseout="this.className='out';" onmousedown="this.className='down';"
onmouseup="this.className='up';" value="Menu Option 3"
onclick="this.value='Option 3 Selected'" />
</html>
菜单选项一开始为灰色,但当鼠标经过时变为正确的颜色(白色和#029BD5)
我试过在每个按钮上设置颜色,但颜色永远不会改变,我错过了什么?
我想你想多了。
<input type="button" value="Button 1" />
<input type="button" value="Button 2" />
<input type="button" value="Button 3" />
和css
input[type="button"]{
background-color:#029BD5;
}
input[type="button"]:hover{
background-color:white;}
}
你不需要为悬停效果设置特定的类。
你可以用一个CSS类和两个选择器来做到这一点:
input[type=button]{
background-color:#029BD5;
}
input[type=button]:hover{
background:white;
}
你可以给你的按钮一个类class='button'
那么你的CSS应该是:
.button{
/* define base styles here - borders, width, margins, etc */
height:30px;
width:200px;
position:absolute;
left:150px;
top:3px
/* define the default background color */
background-color:#029BD5;
}
.button:hover{ /* Style used on mouseover */
background-color:white;
/* Only defining the background-color will override the background-color
defined in .button - all other styles from .button will be preserved */
}
.button:active{ /* Style used on mouse click */
background-color: /* your color */;
}
您真的不需要使用这么多乱七八糟的代码。只需使用CSS:hover选择器。
HTML:<input type="button" id="btn1" class="button" value="Button 1"/>
<input type="button" id="btn2" class="button" value="Button 2"/>
<input type="button" id="btn3" class="button" value="Button 3"/>
CSS: .button {
position:absolute;
height:30px;
width:200px;
left:50%;
margin-left:-100px;
background-color:white;
}
.button:hover {
background-color:#029BD5;
}
#btn1{
top:5px;
}
#btn2{
top:40px;
}
#btn3{
top:75px;
}
JSFiddle演示。