i can't seem to get my hover effects to work on button. have tried many tips
Question
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>
2 answers
solution1
0 2021-11-14 03:31:23
Just change any of the values in your button:hover selector. For example change the color from white to black and you should see a difference when you hover.
solution2
0 2021-11-14 04:18:14
The button and button:hover has the same property value. 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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.