Reputation: 5

How to use a:hover

**UPDATE:

#tablaarriba a:hover {
  color: gray;
}

<table style="text-align: left; width: 1113px; height: 123px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top; text-align: center;"><br>
        <div style="text-align: left;"><a href="home.htm"><img style="border: 0px solid ; width: 240px; height: 95px;" src="Fotos%20ITGS/Logo/logo_rosy.jpg" alt="RosyGLogo"></a></div>
      </td>
      <td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
        <br>
        <br>
        <div id="tablaarriba">
          <a style="color: black; text-decoration: none; background-color: transparent;" href="social.htm">Social</a><br>
          </td>
      <td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
        <br>
        <br>
  </div>
    <a style="color: black; text-decoration: none;" href="file:///Users/monmunoz/Desktop/Colegio/Tec/Quinto%20Semestre/ITGS/PROYECTO/Comercial.htm">Comercial</a><br>
  </td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
  <br>
  <br>
  <a style="color: black; text-decoration: none;" href="proyectospersonales.htm">Proyectos Personales</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
  <br>
  <br>
  <a style="color: black; text-decoration: none;" href="sobrelafotografa.htm">Sobre la fotógrafa</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
  <br>
  <br>
  <a style="color: black; text-decoration: none;" href="contacto.htm">Contacto</a><br>
</td>

</tr>
</tbody>
</table>
<table style="text-align: left; width: 100px; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="20">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><img style="width: 367px; height: 244px;" src="Fotos%20ITGS/Comercial/DSC_1647.jpg" alt="DSC_1647.jpg"></td>
      <td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3043.jpg" alt="DSC_3043.jpg"></td>
      <td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3813.jpg" alt="DSC_3813.jpg"></td>
    </tr>
    <tr>
      <td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3074.jpg" alt="DSC_3074.jpg"></td>
      <td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3817.jpg" alt="DSC_3817.jpg"></td>
      <td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3077.jpg" alt="DSC_3077.jpg"></td>
    </tr>
  </tbody>
</table>
<br>
<div data-role="footer">
  <div style="text-align: center;"> <small><span style="font-family: Century Gothic;">Rosy G. Photography ©</span></small><br>
  </div>
  <h1 style="text-align: center;"><br>
  </h1>
</div>

** I changed some details in the html pointed out by the HTML validator. So now I have this. I'm almost done building my website; however I'm trying to incorporate the a:hover attribute in my stylesheet and I don't know what I'm doing wrong. I want my links to change to color grey whenever the mouse passes above them. Please help me. So far I have this:

Upvotes: 0

Answers (3)

itacode

Reputation: 3787

The inline style style="color: black;..." is stronger than non-inline styles, so you cannot override it.

You should stylize the a tag with a selector (class or tag one).

Upvotes: 0

Philip Kirkbride

Reputation: 22899

Try this:

#tablaarriba a:hover {
  color: gray ;
}

<div id="tablaarriba">
  <a href="#">LINK</a>
</div>

table a:hover {
  color: gray ;
}

table a {
  color: black; text-decoration: none;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link href="menuarriba.css" rel="stylesheet" type="text/css">
  <title>Rosy G Photography and Artwork</title>


</head><body>
<table style="text-align: left; width: 1113px; height: 123px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="vertical-align: top; text-align: center;"><br>
      <div style="text-align: left;"><a href="home.htm"><img style="border: 0px solid ; width: 240px; height: 95px;" src="Fotos%20ITGS/Logo/logo_rosy.jpg" alt="RosyGLogo"></a></div>
      </td>
      <td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
      <br>
      <br>
      <div id="tablaarriba">
      <a href="social.htm">Social</a><br>
      </td>
      <td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
      <br>
      <br>
      </div>
      <a href="file:///Users/monmunoz/Desktop/Colegio/Tec/Quinto%20Semestre/ITGS/PROYECTO/Comercial.htm">Comercial</a><br>
      </td>
      <td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
      <br>
      <br>
      <a href="proyectospersonales.htm">Proyectos Personales</a><br>
      </td>
      <td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
      <br>
      <br>
      <a href="sobrelafotografa.htm">Sobre la fotógrafa</a><br>
      </td>
      <td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
      <br>
      <br>
      <a style="color: black; text-decoration: none;" href="contacto.htm">Contacto</a><br>
      </td>
      
    </tr>
  </tbody>
</table>
<table style="text-align: left; width: 100px; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="20">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><img style="width: 367px; height: 244px;" src="Fotos%20ITGS/Comercial/DSC_1647.jpg" alt="DSC_1647.jpg"></td>
      <td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3043.jpg" alt="DSC_3043.jpg"></td>
      <td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3813.jpg" alt="DSC_3813.jpg"></td>
    </tr>
    <tr>
      <td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3074.jpg" alt="DSC_3074.jpg"></td>
      <td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3817.jpg" alt="DSC_3817.jpg"></td>
      <td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3077.jpg" alt="DSC_3077.jpg"></td>
    </tr>
  </tbody>
</table>
<br>
<div data-role="footer">
<div style="text-align: center;"> <small><span style="font-family: Century Gothic;">Rosy G. Photography ©</span></small><br>
</div>
<h1 style="text-align: center;"><br>
</h1>
</div>


</body></html>

Upvotes: 1

Aru Gyani

Reputation: 17

I recommend adding a class to you're a element. Then use that class inside of the CSS, and try from there. If that does not work, then you might try using transition.

.a {
  text-decoration: none; 
  color: black;
  -webkit-transition: 0.256s;
}

.a:hover {
  transition: 0.256s;
  color: grey;
}

<a href="#" class="a">Test</a>

Upvotes: 1

How to use a:hover

Answers (3)

Related Questions