將鼠標懸停在 CSS 上時，如何僅在鏈接上添加下划線

Question

我需要頁面上的所有鏈接僅在懸停時加下划線，但我無法弄清楚如何在我的 CSS 文件中實現它。 旁注 - 這是一個班級項目，我必須使用絕對定位，以防有人建議我使用網格。 此外，我不清楚是否應該使用 id 或 class 屬性，如果有人能對此有所啟發，將不勝感激。

 body { margin: 0; padding: 0; font-family: Times, "Times New Roman"", Georgia, serif; font-size: 14px; color: #333333; width: 1024px } .navigation { background-color: #333333; color: #fefefe; width: 1024px; font-size: 120%; border-bottom: 3px solid #ff0000; } img { width: 200px; height: 100px; } #museumimageone { position: absolute; left: 24px; top: 200px; } #museumimagetwo { position: absolute; left: 280px; top: 200px; } #museumimagethree { position: absolute; left: 536px; top: 200px; } #museumimagefour { position: absolute; left: 24px; top: 400px; } #museumimagefive { position: absolute; left: 280px; top: 400px; } #museumimagesix { position: absolute; left: 536px; top: 400px; } #news { position: absolute; left: 792px; top: 220px; text-align: left; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; }

 <nav class="navigation"> <p> <a href="index.html">Museum of Odds &amp; Ends </a> <a href="placeholder.html">Visit Us</a> <a href="placeholder.html">Shop</a> <a href="placeholder.html">Our History</a> </p> </nav> <div class="heading"> <h1>Museum of Odds &amp; Ends</h1> <div class="subheading"> <h2>Walton Hall, Milton Keynes</h2> <div id="museumimageone"> <a href="https://www.europeana.eu/en/item/440/item_UBMLSJFMKZCDOGRRMBW2UY5RDAL3V4IP"> <img src="1.jpeg" alt="Budapest Chainbridge 1907" /> <p>Budapest Chainbridge 1907</p> </a> </div> <div id="museumimagetwo"> <a href="https://www.europeana.eu/en/item/369/_129030"> <img src="3.jpeg" alt="Three red-figure attic vases 5th centruy AD" /> <p>Three red-figure attic vases</p> </a> </div> <div id="museumimagethree"> <a href="https://www.europeana.eu/en/item/325/MG061"> <img src="4.jpeg" alt="Bronze Enamel Ring Pin Early Medieval" /> <p>Bronze Enamel Ring Pin</p> </a> </div> <div id="museumimagefour"> <a href="https://www.europeana.eu/en/item/9200271/BibliographicResource_3000058904600"> <img src="7.jpeg" alt="Glass-plate Slide by Erica Wagner" /> <p>Glass-plate Slide</p> </a> </div> <div id="museumimagefive"> <a href="https://www.europeana.eu/en/item/2058611/_kimbl_3cd913c5_b586_4dd7_813b_14708e134f5e"> <img src="10.jpeg" alt="Oilpainting of Ettingen Village by Alois Kron" /> <p>Oilpainting of Ettingen Village</p> </a> </div> <div id="museumimagesix"> <a href="https://www.europeana.eu/en/item/2058611/_kimbl_8a7b633f_8dfa_4bdb_ab43_5c7acb1d06ca"> <img src="11.jpeg" alt="Painting by Soja Feldmaier" /> <p>Painting by Soja Feldmaier</p> </a> </div> <article id=news> <h2>News</h2> <article> <h2>News Entry Title</h2> <h3>News Entry Date</h3> <p>News Entry Text</p> </article> <article> <h2>News Entry Title</h2> <h3>News Entry Date</h3> <p>News Entry Text</p> </article> </article>

Answer 1

使用text-decoration 。 對於所有鏈接將其設置為none並將其設置為所有:hover ed 的鏈接的underline ：

 a { text-decoration: none; } a:hover { text-decoration: underline; }

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

工作示例：（使用您的代碼）

 body { margin: 0; padding: 0; font-family: Times, "Times New Roman"", Georgia, serif; font-size: 14px; color: #333333; width: 1024px } a { text-decoration: none; } a:hover { text-decoration: underline; } .navigation { background-color: #333333; color: #fefefe; width: 1024px; font-size: 120%; border-bottom: 3px solid #ff0000; } img { width: 200px; height: 100px; } #museumimageone { position: absolute; left: 24px; top: 200px; } #museumimagetwo { position: absolute; left: 280px; top: 200px; } #museumimagethree { position: absolute; left: 536px; top: 200px; } #museumimagefour { position: absolute; left: 24px; top: 400px; } #museumimagefive { position: absolute; left: 280px; top: 400px; } #museumimagesix { position: absolute; left: 536px; top: 400px; } #news { position: absolute; left: 792px; top: 220px; text-align: left; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; }

 <nav class="navigation"> <p> <a href="index.html">Museum of Odds &amp; Ends </a> <a href="placeholder.html">Visit Us</a> <a href="placeholder.html">Shop</a> <a href="placeholder.html">Our History</a> </p> </nav> <div class="heading"> <h1>Museum of Odds &amp; Ends</h1> <div class="subheading"> <h2>Walton Hall, Milton Keynes</h2> <div id="museumimageone"> <a href="https://www.europeana.eu/en/item/440/item_UBMLSJFMKZCDOGRRMBW2UY5RDAL3V4IP"> <img src="1.jpeg" alt="Budapest Chainbridge 1907" /> <p>Budapest Chainbridge 1907</p> </a> </div> <div id="museumimagetwo"> <a href="https://www.europeana.eu/en/item/369/_129030"> <img src="3.jpeg" alt="Three red-figure attic vases 5th centruy AD" /> <p>Three red-figure attic vases</p> </a> </div> <div id="museumimagethree"> <a href="https://www.europeana.eu/en/item/325/MG061"> <img src="4.jpeg" alt="Bronze Enamel Ring Pin Early Medieval" /> <p>Bronze Enamel Ring Pin</p> </a> </div> <div id="museumimagefour"> <a href="https://www.europeana.eu/en/item/9200271/BibliographicResource_3000058904600"> <img src="7.jpeg" alt="Glass-plate Slide by Erica Wagner" /> <p>Glass-plate Slide</p> </a> </div> <div id="museumimagefive"> <a href="https://www.europeana.eu/en/item/2058611/_kimbl_3cd913c5_b586_4dd7_813b_14708e134f5e"> <img src="10.jpeg" alt="Oilpainting of Ettingen Village by Alois Kron" /> <p>Oilpainting of Ettingen Village</p> </a> </div> <div id="museumimagesix"> <a href="https://www.europeana.eu/en/item/2058611/_kimbl_8a7b633f_8dfa_4bdb_ab43_5c7acb1d06ca"> <img src="11.jpeg" alt="Painting by Soja Feldmaier" /> <p>Painting by Soja Feldmaier</p> </a> </div> <article id=news> <h2>News</h2> <article> <h2>News Entry Title</h2> <h3>News Entry Date</h3> <p>News Entry Text</p> </article> <article> <h2>News Entry Title</h2> <h3>News Entry Date</h3> <p>News Entry Text</p> </article> </article>

Answer 2

您目前似乎沒有應用任何懸停樣式。 首先清除您不想使用的任何樣式：

a {
    text-decoration: none;
}

然后添加下划線：

a:hover {
    text-decoration: underline;
}

這應該適用於每個鏈接。