將滑鼠懸停在CSS上時，如何僅在鏈接上添加下劃線-有解無憂

我需要頁面上的所有鏈接僅在懸停時加下劃線，但我無法弄清楚如何在我的 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>

uj5u.com熱心網友回復：

使用text-decoration. 將其設定none為所有鏈接，并將其設定underline為所有已:hover編輯的鏈接：

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>

uj5u.com熱心網友回復：

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

a {
    text-decoration: none;
}

然后添加下劃線：

a:hover {
    text-decoration: underline;
}

這應該適用于每個鏈接。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/338334.html

標籤：html css

上一篇：如何在django中點擊按鈕獲取輸入值

下一篇：ASP.NETMVC如何通過Id從另一個模型獲取名稱