[英]i can't seem to get my hover effects to work on button. have tried many tips
i am new and this is my first real assignment.我是新来的,这是我的第一个真正的任务。 i was able to get it right in other challenges but this one is a bit more complex and for some reason i just don't see where i'm going wrong.
我能够在其他挑战中做到这一点,但这个挑战有点复杂,出于某种原因,我只是不知道我哪里出错了。 i have googled many options and none have really helped.
我用谷歌搜索了很多选项,但没有一个真正有帮助。 i may have been staring at this for to long.
我可能已经盯着这个看很久了。 but any help is appreciated.
但任何帮助表示赞赏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3 day Forecast</title>
<style>
h1 {
color: #1a64d6;
font-size: 34px;
font-family: Arial, Helvetica, sans-serif;
margin: auto;
text-align: center;
line-height: 50px;
}
h2 {
font-size: 34px;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin: auto;
line-height: 48px;
}
h3 {
text-align: center;
list-style: none;
}
ul {
text-align: center;
list-style: none;
padding: 20px;
display: block;
}
p {
opacity: 0.7;
font-size: 18px;
}
li {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin: 0 auto;
padding: 10px 0;
}
button {
display: block;
text-align: center;
border: 1px solid #1a64d6;
background-color: #1a64d6;
display: block;
margin: 20px auto;
color: white;
font-size: 16px;
padding: 16px 24px;
border-radius: 30px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
transition: all 200ms ease-in-out;
}
footer {
text-align: center;
opacity: 0.7;
font-family: Arial, Helvetica, sans-serif;
}
button:hover {
color: white;
background: #1a64d6;
cursor: pointer;
}
</style>
</head>
<body>
<h1>
⛅
<br />
Currently 21° in Tokyo
</h1>
<h2>
13° /
<strong> 23° </strong>
</h2>
<ul>
<li>
<h3>🌧 Tomorrow</h3>
<p>10° / <strong> 22°</strong></p>
</li>
<li>
<h3>⛅ Saturday</h3>
<p>15° / <strong> 17°</strong></p>
</li>
<li>
<h3>☀ Sunday</h3>
<p>25° / <strong> 28°</strong></p>
</li>
</ul>
<button>Change City</button>
<footer>Coded by: Tiffany Asbell</footer>
</body>
</html>
Just change any of the values in your button:hover selector.只需更改 button:hover 选择器中的任何值即可。 For example change the color from white to black and you should see a difference when you hover.
例如,将颜色从白色更改为黑色,当您悬停时,您应该会看到不同之处。
The button and button:hover has the same property value. button 和 button:hover 具有相同的属性值。 Change color or background color property value in button:hover you can see the difference.
更改按钮中的颜色或背景颜色属性值:悬停您可以看到差异。
For example,例如,
button{
color:white;
background-color:blue;
cursor:pointer;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.