无法获取我的Html 按钮默认为我选择的颜色

本文关键字：默认 选择 颜色 按钮 获取 我的 Html input | 更新日期: 2023-09-27 17:49:14

我写了一个菜单类，默认颜色是#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)

我试过在每个按钮上设置颜色，但颜色永远不会改变，我错过了什么?

无法获取我的Html <input>按钮默认为我选择的颜色

我想你想多了。

<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演示。

相关文章：