javascript - 我似乎无法让我的悬停效果在按钮上起作用。尝试了很多技巧
问题描述
我是新来的,这是我的第一个真正的任务。我能够在其他挑战中做对,但这个有点复杂,出于某种原因,我只是看不出我哪里出错了。我用谷歌搜索了很多选项,但没有一个真正有帮助。我可能已经盯着这个很久了。但任何帮助表示赞赏。
<!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>
解决方案
button 和 button:hover 具有相同的属性值。更改按钮中的颜色或背景颜色属性值:悬停您可以看到差异。
例如,
button{
color:white;
background-color:blue;
cursor:pointer;
}
推荐阅读
- arrays - 返回一个修改后的 char 数组**
- c# - 如果数据表中的列名相同,如何跳过
- javascript - 为什么 textContent 添加分配不适用于标签?
- hive - 支持greenplum string_agg 转换成hivesql
- excel - VBA Excel - 参考图表系列的可变命名工作表
- spring-kafka - 如何通过spring kafka中的应用程序属性设置factory.setAckDiscarded(true)?
- swift - 如何使 NSSortDescriptor 的 KeyPath 通用?
- kubernetes - kubernetes如何调用完整的服务名称而不是AWS节点ip
- ubuntu - qemu-system-x86_64:设备 ide-cd 初始化失败:无法获得共享“写”锁
- google-apps-script - 用于从 Gmail 中提取数据并在 Google 表格中填写匹配行的 Google Apps 脚本