[英]Changing color of text in div on hover? - CSS
Basically I have a button which is white but has a purple border and the text is purple and when the user hovers over the image, I want the background-color to be purple and the text to be white. 基本上,我有一个白色的按钮,但边框为紫色,文本为紫色,当用户将鼠标悬停在图像上时,我希望背景色为紫色,文本为白色。 Right now, I can get the background-color to switch from white to purple but I cannot get the text to switch from purple to white.
现在,我可以将背景颜色从白色切换为紫色,但无法将文本从紫色切换为白色。 THis is the code that I have at the moment: HTML:
这是我目前拥有的代码:HTML:
<a href="index.php?page=learnmore"><div class="learnMore"><h3>LEARN MORE</h3></div></a>
CSS: CSS:
.learnMore {
width:140px;
height:35px;
border:1px solid purple;
margin:0 auto;
}
.learnMore:hover {
background-color:purple;
color:white
}
I have no idea why the color:white will not change the color. 我不知道为什么color:white不会改变颜色。 Any help is greatly appreciated!
任何帮助是极大的赞赏!
Looks like you are missing a semi-colon after color:white, you also may want to consider browser defaults for link visited colors etc. Here is a working demo: codepen demo 看起来您在color:white之后缺少分号,您可能还想考虑浏览器的默认链接访问颜色等。这是一个有效的演示: codepen demo
.learnMore {
background-color: white;
width:140px;
height:35px;
border:1px solid purple;
margin:0 auto;
color: purple;
}
.learnMore:hover {
background-color:purple;
color:white;
}
It should be noted that an h3
is a block element and a
is an inline element. 应当注意,
h3
是一个块元素, a
是一个内联元素。 Prior to HTML5
, the correct way to structure this would be with an a
wrapped in an h3
, eg: 此前
HTML5
,正确的方法来组织,这将是有a
包裹在h3
,例如:
<h3><a href="#">Learn More</a></h3>
With HTML5
, it is now okay to wrap block elements with a
. 使用
HTML5
,现在可以用来包装块元素a
。 I would go with something along these lines: 我会遵循以下思路:
<!-- CSS -->
<style>
a.learnMore {
text-decoration: none;
text-transform: uppercase;
color: purple;
}
a.learnMore h3 {
border: 1px solid purple;
padding: 10px;
text-align: center;
}
a.learnMore h3:hover {
background-color: purple;
color: white;
}
</style>
<!-- HTML -->
<a href="index.php?page=learnmore" class="learnMore"><h3>Learn More</h3></a>
a.learnMore { text-decoration: none; text-transform: uppercase; color: purple; } a.learnMore h3 { border: 1px solid purple; padding: 10px; text-align: center; } a.learnMore h3:hover { background-color: purple; color: white; }
<a href="index.php?page=learnmore" class="learnMore"><h3>Learn More</h3></a>
It is not working because you are applying the style to the entire DIV not the text itself. 它不起作用,因为您将样式应用于整个DIV,而不是文本本身。
Add a id
to the <h3>
向
<h3>
添加id
<a href="index.php?page=learnmore"><div class="learnMore"><h3 id="t">LEARN MORE</h3></div></a>
Add this to your css 将此添加到您的CSS
#t:hover{
text-decoration: none;
font-family: Verdana;
text-decoration: none;
color:#FF0000;
}
Then just edit the colours you and the position 然后只需编辑您的颜色和位置
in your case, you need to use a great css feature called a direct descendant combinator. 在您的情况下,您需要使用一个很棒的CSS功能,称为直接后代组合器。 ">"
“>”
it will be like this : 它会是这样的:
.learnMore {
width:140px;
height:35px;
border:1px solid purple;
margin:0 auto;
&:hover {
background-color:purple;
}
&:hover > h3 {
color: #fff;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.