将鼠标悬停在 CSS 上时，如何仅在链接上添加下划线

Question

I need all the links on my page to ONLY underline when hoovered over and I cannot work out how to implement that in my CSS file. Side note - this is for a class project where I had to use absolute positioning in case anyone recommends I use grid. Also I am not clear on whether I should be using id or class attributes if anyone could shine some light on that it would be much appreciated.

 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

Use text-decoration . Set it to none for all links and set it to underline for all links that are :hover ed:

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

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

Working example: ( with your code )

 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

You don't seem to have any hover styles applied at the moment. First clear any styles you don't want using:

a {
    text-decoration: none;
}

Then add the underline with:

a:hover {
    text-decoration: underline;
}

This should apply to every link.