更改悬停上的链接/按钮的背景颜色

问题描述：

我想更改此链接的背景颜色，当它悬停时，它看起来像一个按钮。我该怎么做呢。下面是它的当前CSS。更改悬停上的链接/按钮的背景颜色

input[type="button" i], 
input[type="submit" i], 
input[type="reset" i], 
input[type="file" i]::-webkit-file-upload-button, 
button { 
    background-color: #fbf7de; 
    padding: 9px; 
    display: inline; 
    border-style: solid; 
    border-color: #fbf7de; 
    border-width: 5px; 
}

使用'：hover'伪类？ – j08691

类型属性谓词之后的_i_是什么？这是否应该匹配一个''标签？ –

@SamOnela - “在右括号之前添加一个i（或I）会导致该值不区分大小写（对于ASCII范围内的字符）。” https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors – j08691

答

这基本上就是这样 - 为了这个例子我减少了选择器。您还可以在悬停状态下修改其他样式（如border-color），并为动画添加transition。

button { 
 
    background-color: #fbf7de; 
 
    padding: 9px; 
 
    display: inline; 
 
    border-style: solid; 
 
    border-color: #fbf7de; 
 
    border-width: 5px; 
 
} 
 

 
button:hover { 
 
    background: #fff; 
 
}

<button>Button</button>

答

添加:hover的元素

input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button, a[href]{ 
 
    background-color:#fbf7de; 
 
    padding:9px; 
 
    display:inline; 
 
    border-style: solid; 
 
    border-color: #fbf7de; 
 
    border-width: 5px; 
 
} 
 
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="file"]::-webkit-file-upload-button:hover, button:hover, a[href]:hover{ 
 
    background-color:#ff0000; 
 
}

<input type="button" value="button"/><br/> 
 
<a href="#">anchor</a>

更改悬停上的链接/按钮的背景颜色

相关推荐