懸停背景色無法正確填充CSS網格

Question

 .body{ } .grid-container{ display: grid; width: 1024px; grid-template-columns: auto auto auto auto; background-color: black; padding: 5px 5px; border: 1px solid black; text-align: center; margin: 10px auto; } #home, #about, #bookings, #contact { padding: 5px 5px; margin: 5px 5px; background-color: black; border: 1px solid white; font-weight: bold; } #home, #about, #bookings, #contact, a:hover { background-color: red; } #home, #about, #bookings, #contact, a:link { color: white; } #home, #about, #bookings, #contact, a:visited { background-color: black; color: white; } #home{ grid-column-start: 1; grid-column-end: 2; } #about{ grid-column-start: 2; grid-column-end: 3; } #bookings{ grid-column-start: 3; grid-column-end: 4; } #contact{ grid-column-start: 4; grid-column-end: 5; }

 <!Doctype HTML> <html> <head> <link rel = "stylesheet" type = "text/css" href="test2Style.css"> </head> <body> <div class = "grid-container"> <div id = "home"><a href = "home.html">Home</a></div> <div id = "about"><a href = "home.html">About us</a></div> <div id = "bookings"><a href = "home.html">Bookings</a></div> <div id = "contact"><a href = "home.html">Contact Us</a></div> </div> </body> </html>

因此，我試圖在網格中構建一個簡單的菜單，然后在第一部分開始工作后再進行擴展。

我正在嘗試設置菜單，以便將鼠標懸停在超鏈接上，背景顏色更改為紅色，但是當前僅更改文本后面的背景。

我已經嘗試過處理溢出屬性，並且認識到我可能需要着眼於使用懸停更改id #home的背景顏色以外的其他內容。

我希望每個菜單項的整個背景都可以改變顏色，而不僅僅是一小部分文本，但是我無法弄清楚，而且我也沒有想辦法尋找問題。

如果您不能告訴我我是CSS的新手，請隨時批評我的html / CSS並指出其他錯誤或不正確的做法。

感謝您的關注，

Answer 1

代碼的問題在於，您將背景色應用於了鏈接，而不是周圍的div（即實際的網格單元）。 一種解決方案是改為將紅色背景應用於懸停時的div，如以下最小示例所示：

 div { display: inline-block; border: 1px solid black; padding: 10px 100px; } div:hover { background: red; }

 <div> <a href="#">Home</a> </div>

但是更好的主意是從鏈接周圍刪除div，這完全沒有用。 使整個框成為鏈接； 這也使單擊鏈接更加容易。

 a { display: inline-block; border: 1px solid black; padding: 10px 100px; } a:hover { background: red; }

 <a href="#">Home</a>

在我們討論的同時，我將簡化CSS。 您確實不需要所有這些ID，尤其不需要手動定位單元格。 嘗試使您的CSS選擇器盡可能簡單。 如果它們有點復雜，則表明您應該在代碼中添加更多的類。

 .grid-container { display: grid; grid-template-columns: auto auto auto auto; width: 1024px; margin: 10px auto; padding: 5px; background-color: black; color: white; font-weight: bold; text-align: center; } .grid-container a { margin: 5px; padding: 5px; border: 1px solid white; color: white; } .grid-container a:hover { background-color: red; }

 <div class="grid-container"> <a href="home.html">Home</a> <a href="home.html">About us</a> <a href="home.html">Bookings</a> <a href="home.html">Contact Us</a> </div>

綜上所述，您應該熟悉瀏覽器的檢查窗口的方式，該窗口可讓您調試代碼並查看將CSS應用於哪些元素。 所有現代瀏覽器都有一個。

懸停背景色無法正確填充CSS網格

問題描述

1 個解決方案

解決方案1
1 已采納 2019-05-11 16:47:30

懸停背景色無法正確填充CSS網格

問題描述

1 個解決方案

解決方案1 1 已采納 2019-05-11 16:47:30

解決方案1
1 已采納 2019-05-11 16:47:30