如何使用：悬停

时间：2016-11-08 00:47:20

标签： html css

**更新：

＆＃13;
＆＃13; 
#tablaarriba a:hover {
  color: gray;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

** 我更改了HTML验证器指出的html中的一些细节。所以现在我有了这个。 我几乎完成了我的网站建设;但是我试图在我的样式表中加入a：hover属性，但我不知道自己做错了什么。我希望当鼠标经过它们时，我的链接会变为灰色。请帮我。到目前为止，我有这个：

3 个答案:

答案 0 :(得分：1)

试试这个：

#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>

答案 1 :(得分：1)

我建议您添加一个类作为元素。然后在CSS中使用该类，并从那里尝试。如果这不起作用，那么您可以尝试使用转换。

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

.a:hover {
  transition: 0.256s;
  color: grey;
}
＆＃13; 
<a href="#" class="a">Test</a>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

内联样式样式=“color：black; ...”比非内联样式强，因此您无法覆盖它。

您应该使用选择器（类或标记一个）对标记进行样式化。

相关问题
最新问题