当鼠标悬停在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，对于:hovered的所有链路，设置为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;
}

这应该适用于每个环节。