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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Working example: (with your code)

Show code snippet

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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.