如何解决CSS中页面链接hover样式不生效的问题

的标签中不生效的解决方法 #

问题描述 #

我是Web开发新手，在CSS样式设置中遇到问题：使用无序列表的课程链接，鼠标hover时能正常变色；但用于跳转页面的“Contact me”和“Main page”链接（包含在标签内的

元素），hover样式未生效，推测是h3的CSS规则影响了链接样式，请求解决方法。

相关代码 #

主页HTML代码 #

<head>
  <meta charset="utf-8">
  <title>Anton's Personal Site</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <table cellspacing="20">
    <td><img src="Images/1.jpg" alt="Anton profile picture" style="width:200px;height:350px;"></td>
    <td>
      <h1>Anton Blahist</h1>
      <p><em>Web Development <strong>Beginner</strong></em></p>
      <p>23 years old, like computer games, creating music and writing songs</p>
    </td>
  </table>
  <h3>Education</h3>
  <ul>
    <li><a href="some courses">some courses</a></li><br>
    <li><a href="some courses">some courses</a></li>
  </ul>
  <h3>Hobbies</h3>
  <ol>
    <li>Computer gaming</li>
    <li>Song writting</li>
    <li>Music creating with FL Studio</li>
    <li>Sports exercises</li>
  </ol>
  <h3>Skills</h3>
  <table>
    <tr>
      <td>
        <table>
          <tr>
            <td>English</td>
            <td>🔹🔹🔹🔹</td>
          </tr>
          <tr>
            <td>Sports</td>
            <td>🔹🔹🔹🔹</td>
          </tr>
          <tr>
            <td>Music</td>
            <td>🔹🔹🔹</td>
          </tr>
        </table>
      </td>
      <td>
        <table>
          <tr>
            <td>Lyrics</td>
            <td>🔹🔹🔹🔹</td>
          </tr>
          <tr>
            <td>HTML</td>
            <td>🔹🔹</td>
          </tr>
          <tr>
            <td>Gaming</td>
            <td>🔹🔹🔹🔹🔹</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <hr>
  <a href="contact_me.html">
    <h3>Contact me</h3>
  </a>
</body>

</html>

联系页HTML代码 #

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Contact me</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <h2>Contact me</h2>
  <form action="mailto:myemail" method="post" enctype="text/plain">
    <label>Your Name:</label>
    <input type="text" name="" value="">
    <br>
    <label>Your Email:</label>
    <input type="email" name="" value="">
    <br>
    <label>Your Message:</label>
    <br>
    <textarea name="name" rows="10" cols="30"></textarea>
    <br>
    <input type="submit" name="">
  </form>
  <hr>
  <a href="index.html">
    <h3>Main page</h3>
  </a>
</body>

</html>

外部CSS代码 #

body {
  background-color: #E3FDFD;
  color: black;
}

hr {
  border-style: dotted none none;
  border-color: #71C9CE;
  border-width: 5px;
  width: 3%;
}

h1 {
  color: #2F8F9D;
}

h2 {
  color: #2F8F9D;
}

h3 {
  color: #2F8F9D;
}

a:link, a:visited {
  background-color: #A6E3E9;
  color: black;
  border: 1px solid #2F8F9D;
  padding: 5px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: #A6E3E9;
  color: white;
}

label {
  color: #2F8F9D;
}

问题原因 #

你猜的没错，

的color样式优先级比的hover样式高。因为

是的子元素，它自身的颜色设置会直接覆盖父元素继承过来的颜色，所以hover时只有的背景色生效，但文字颜色还是

的#2F8F9D，看起来就像没变化。

解决方法 #

方法一：快速修复现有结构 #

在你的CSS里添加下面这段代码，明确指定当被hover时，里面的

文字颜色也要变成白色：

a:hover h3, a:active h3 {
  color: white;
}

这样hover的时候，

的文字颜色就会跟着变成白色，和普通链接的效果一致。

方法二：调整HTML结构（更推荐） #

把标签放到

里面，而不是反过来，这样更符合HTML语义化规范（标题应该包含链接，不是链接包含标题）：

<!-- 替换原来的<a>包裹<h3>的结构 -->
<h3><a href="contact_me.html">Contact me</a></h3>

如果需要保持原来的样式，可以调整CSS里的链接规则，给

里的链接单独设置样式：

h3 a:link, h3 a:visited {
  background-color: #A6E3E9;
  color: black;
  border: 1px solid #2F8F9D;
  padding: 5px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

h3 a:hover, h3 a:active {
  color: white;
}

这种方式不仅解决了hover问题，还让HTML结构更合理，对后续维护和SEO都更友好。

---

内容的提问来源于stack exchange，提问作者Local man