twitter-bootstrap 如何删除引导按钮悬停效果?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/26681554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I remove a bootstrap buttons hover effect?
提问by Weblurk
I've gotten an assignment to remove the hover effect of the following button:
我得到了一项任务,以消除以下按钮的悬停效果:
Visit http://www.appsbayou.se, search for the text "Kontaktinformation". Above it there's a button, "Skicka" which has an ugly black hover effect. This style comes from existing css.
访问http://www.appsbayou.se,搜索文本“Kontaktinformation”。在它上面有一个按钮,“Skicka”,它有一个丑陋的黑色悬停效果。这种样式来自现有的 css。
I'm using Chrome and even if I open up Devtools I can't nail down the style rule that does this effect.
我正在使用 Chrome,即使我打开 Devtools,我也无法确定产生这种效果的样式规则。
How can I remove this black hover color or at least change it to a color of my choosing?
如何删除这种黑色悬停颜色或至少将其更改为我选择的颜色?
回答by Fahad Hasan
You will need to toggle the hoverstate inside the developer tools in order to view the CSS which is applied to the button on hoverstate. Adding this CSS to your stylesheet will fix the problem:
您需要hover在开发人员工具中切换状态,才能查看应用于按钮开启hover状态的 CSS 。将此 CSS 添加到您的样式表将解决此问题:
input[type=submit]:hover {
background-position: 0px;
}
回答by JimmyRare
You have these rules:
你有这些规则:
input[type=submit]:hover {
color: #fff;
background-color: #222; // Here is the black background-color
text-decoration: none;
background-position: 0 -15px; // moves the background
-webkit-transition: background-position .1s linear;
-moz-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
transition: background-position .1s linear;
}
.wpcf7-submit:hover {
background-image: linear-gradient(to bottom,#fb8800,#975200) !important; // remove this?
}
Simply change the backgound-color to your choice of color. I would also suggest removing the gradient hover and the background positioning if you only wish to change a color. (And of course then the transitions doesn't make much sense either. )
只需将背景颜色更改为您选择的颜色即可。如果您只想更改颜色,我还建议删除渐变悬停和背景定位。(当然,过渡也没有多大意义。)
回答by PT_C
Go into the HTMLand you will see this line which is the button:
进入HTML,您将看到这一行,即按钮:
<input class="wpcf7-form-control wpcf7-submit" type="submit" value="Skicka">
Remove the wpcf7-submitto get rid of the orange. It changes the color of the button but it may be a solution.
取出wpcf7-submit以摆脱橙色。它改变了按钮的颜色,但它可能是一个解决方案。
Or go into the CSS file and change this attribute:
或者进入 CSS 文件并更改此属性:
.wpcf7-submit {
background-image: linear-gradient(to bottom, #fb8800, #975200) !important;
}
The code for the orange is #fb8800
橙色的代码是 #fb8800
回答by austin wernli
remove this from the page
从页面中删除它
.wpcf7-submit:hover{
background-image: linear-gradient(to bottom,#fb8800,#975200) !important;
}
or do a search for it... find it... then kill it!
或者搜索它...找到它...然后杀死它!

