[英]Button color change on hover CSS
The subject exists on Stackoverflow but I don't understand my problem in CSS.该主题存在于 Stackoverflow 上,但我不明白我在 CSS 中的问题。
How can I change a button's color on hover? 如何更改 hover 上的按钮颜色?
I have a login
button, when I wish to hover the button.我有一个
login
按钮,当我想hover这个按钮时。 One white background should appears.应出现一个白色背景。
I get a small background color.我得到一个小的背景颜色。
body{ background-image: url("https://zupimages.net/up/20/20/vreu.jpg"); height: 550px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }.header-btn-register-login{ margin-top: 220px; margin-left: 538px; display: flex; font-size: 26px; text-transform: uppercase; text-align: center; }.btn-login { background:rgba(0,0,0,0); border: solid 3px; color: #FFF; padding: 12px 18px; }.btn-login a { color: #FFF; text-decoration: none; }.btn-login a:hover { color: black; background-color: #FFF; }
<div class="header-btn-register-login"> <div class="btn-login"><a href="#">Login</a></div> </div>
Change so that you hoover the button and not the a tag to change the background.更改以便您悬停按钮而不是 a 标签来更改背景。 And then you should change the color of the a tag.
然后你应该改变 a 标签的颜色。 Example css below.
下面的示例 css。
.btn-login:hover {
background-color: #FFF;
}
.btn-login:hover a {
color: black;
}
You should use ".btn-login:hover " instead of ".btn-login a:hover", this is going to work.您应该使用“.btn-login:hover”而不是“.btn-login a:hover”,这将起作用。
You need to change the background color of .btn-login
not .btn-login a
您需要更改
.btn-login
而不是.btn-login a
的背景颜色
.btn-login:hover {
background-color: #FFF;
}
You are setting the hover on your a
tag, that's why your background-color changes when you hover the a
.您在
a
标签上设置 hover ,这就是为什么当您使用 hover a
时背景颜色会发生变化的原因。 You can change as following:您可以进行如下更改:
body{ background-image: url("https://zupimages.net/up/20/20/vreu.jpg"); height: 550px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }.header-btn-register-login{ margin-top: 220px; margin-left: 538px; display: flex; font-size: 26px; text-transform: uppercase; text-align: center; }.btn-login { background:rgba(0,0,0,0); border: solid 3px; color: #FFF; padding: 12px 18px; }.btn-login a { color: #FFF; text-decoration: none; } /* Here are the modified css */.btn-login:hover { color: black; background-color: #FFF; }.btn-login:hover a { color: #000; }
<div class="header-btn-register-login"> <div class="btn-login"><a href="#">Login</a></div> </div>
You are given the hover effect for a inside the button.您将获得按钮内部的 hover 效果。 Thats why only a is changing the color on hover.
这就是为什么只有 a 改变了 hover 的颜色。 Change the line to:
将行更改为:
.btn-login:hover {
background-color: #ffffff; ( Your desired color )
}
The problem here is that you're not using a button but an <a>
element, so when you change the background for the <a>
element only the background of the writing changes.这里的问题是您使用的不是按钮而是
<a>
元素,因此当您更改<a>
元素的背景时,只有文字的背景会发生变化。 To change the background of the whole 'pseudo' button you need to change the background color of the <div>
containing the <a>
element while changing also the <a>
element.要更改整个“伪”按钮的背景,您需要更改包含
<a>
元素的<div>
的背景颜色,同时还要更改<a>
元素。
Your code modified accordingly to what said above:您的代码已根据上述内容进行了相应修改:
body{ background-image: url("https://zupimages.net/up/20/20/vreu.jpg"); height: 550px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }.header-btn-register-login{ margin-top: 220px; margin-left: 538px; display: flex; font-size: 26px; text-transform: uppercase; text-align: center; }.btn-login { background:rgba(0,0,0,0); border: solid 3px; color: #FFF; padding: 12px 18px; }.btn-login a { color: #FFF; text-decoration: none; }.btn-login:hover{ color: black; background-color: #FFF; }.btn-login:hover a{ color: black; }
<div class="header-btn-register-login"> <div class="btn-login"><a href="#">Login</a></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.