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>