html - 如何使用 :hover

标签 html css

**更新:

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

** 我更改了 HTML 验证器指出的 html 中的一些细节。所以现在我有了这个。 我的网站 build 快完成了;但是我正在尝试将 a:hover 属性合并到我的样式表中,但我不知道自己做错了什么。我希望我的链接在鼠标经过它们上方时变为灰色。请帮我。到目前为止我有这个:

最佳答案

试试这个:

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

关于html - 如何使用 :hover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40477188/

相关文章:

html - Foundation Orbit - 图像未显示

html - XLT 在 xml 标签之间交叉引用来决定应该添加什么类属性

html - body 下方的空白空间和 div 的奇怪位置

html - flexbox:使用 flex-direction: row 拉伸(stretch)元素的高度

javascript - 使用 JavaScript 移除类

jquery - 如何在相对元素上设置绝对位置?

html - Bootstrap竖写

javascript - 加载内容后动画 div 元素大小

c# - CSS 中的 LinkedResource

css - IE 6 下拉选择区域太窄