如何解决HTML和CSS块-悬停在上方时更改整个块的颜色
我有一系列的代码,一旦用户将鼠标悬停在上面,就想用深色突出显示。我不确定我在做什么错。当我添加<div>
时,可以使文本突出显示,但是我确实希望整个块更改其颜色。我知道添加<div>
是不正确的方法,但是我想证明自己正在尝试。我尝试了其他一些操作,包括尝试包含<article>
标记并在我的CSS代码中应用悬停颜色,但无济于事。
我可能忽略了一些简单的事情,感谢您的帮助。
* {
box-sizing: border-box;
}
main {
max-width: 1100px;
margin: 15px auto;
padding: 0 15px;
width: 100%;
display: grid;
/* Define Auto Row size */
grid-auto-rows: 215px;
/*Define our columns */
grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
grid-gap: 1em;
}
article {
border-radius: 10px;
padding: 10px;
color: #fff;
background-color: #55BBE9
}
article: hover {
background-color: #1B2631;
}
div:hover {
background-color: #1B2631;
}
<main>
<article><div><b>Code 1</b></div></article>
<article><div><b>Code 2</b></div></article>
<article><div><b>Code 3</b></div></article>
</main>
解决方法
article:hover {
background-color: #1B2631;
}
您只需要删除冒号和hover
之间的空格。
这对我来说很好。
请尝试此演示。
您在空间article: hover
中添加了不需要的空间并在html中更改了div的close标签。您在文章关闭标记后关闭了div
<article><div><b>Code 1</b></article></div>
更改为
<article><div><b>Code 1</b></div></article>
* {
box-sizing: border-box;
}
main {
max-width: 1100px;
margin: 15px auto;
padding: 0 15px;
width: 100%;
display: grid;
/* Define Auto Row size */
grid-auto-rows: 215px;
/*Define our columns */
grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
grid-gap: 1em;
}
article {
border-radius: 10px;
padding: 10px;
color: #fff;
background-color: #55BBE9
}
article:hover {
background-color: #1B2631;
}
div:hover {
background-color: #1B2631;
}
<main>
<article><div><b>Code 1</b></div></article>
<article><div><b>Code 2</b></div></article>
<article><div><b>Code 3</b></div></article>
</main>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。