html - 如何在将鼠标悬停在 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

使用文本装饰。对于所有链接将其设置为 none，对于所有经过 :hover 编辑的链接将其设置为 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>