HTML 和 CSS 塊 - 在懸停時更改整個塊的顏色

Question

我有一系列代碼，一旦用戶將鼠標懸停在它們上方，我想用深色突出顯示。 我不確定我在這里做錯了什么。 當我添加<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>

Answer 1

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

您只需要刪除冒號和hover之間的空格。 這對我來說很好用。

Answer 2

請試試這個演示。

您正在添加空間article: hover將不需要的空間article: hover並更改 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>