HTML 和 CSS 块 - 将鼠标悬停在上方时更改整个块的颜色

Question

我有一系列代码，我想在用户将鼠标悬停在它们上面时用深色突出显示。我不确定我在这里做错了什么。当我添加一个 <div> 时，我可以让文本突出显示，但是我真的希望整个块都改变它的颜色。我知道添加 <div> 不是正确的方法，但我想证明我正在尝试。我尝试了其他一些方法，包括尝试在我的 CSS 代码中包含一个 <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>

Answer 1

article:hover {
  background-color: #1B2631;
}

您只需删除冒号和 hover 之间的 space。这对我来说很好。

Answer 2

请试试这个演示。

您添加 space article: hover space 不需要并且在 html 中更改了 div 的关闭标记。您在文章关闭标签

后关闭了 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>

HTML 和 CSS 块 - 将鼠标悬停在上方时更改整个块的颜色

HTML and CSS Blocks - Change color of the entire block on hover over

html

css

hover

highlight