仅为链接更改 h1 悬停颜色

Posted 2023-05-08

【中文标题】仅为链接更改 h1 悬停颜色

【英文标题】：change h1 hover color only for links

【发布时间】：2016-04-12 02:35:11

【问题描述】：

我正在尝试弄清楚如何更改悬停颜色，但前提是文本有链接

这是 css 代码，但它会在有或没有链接的情况下改变颜色

h1, h2, h3, h4 
color:#3F3F3F;


h1:hover, h2:hover, h3:hover, h4:hover 
color:#000000;

【问题讨论】：

h1 a:hover, h2 a:hover ....

这取决于您如何构建链接。

@FabrizioCalderan 我试过了，但是颜色悬停不能这样工作，我不知道为什么

@DavidM 所以你还需要发布你的标记。请与您的尝试分享小提琴

【参考方案1】：

这取决于您如何构建链接。

有两个基本品种。

a) 标题内的链接。在这种情况下：

a 
  color: red;
  text-decoration: none;

h1 a:hover 
  color: blue;

<h1><a href="#">Link Inside Heading</a></h1>

b) 链接内的标题。在哪种情况下：

a 
  color: red;
  text-decoration: none;
  border: 1px solid grey;
  display: inline-block;

a:hover 
  color: green;

/* or */

h1 
  background: #c0ffee;

a h1:hover 
  color: pink;

<a href="#"><h1>Heading Inside Link</h1></a>

【参考方案2】：

示例：

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover 
   color:grey;

【参考方案3】：

您正在寻找的答案很简单：

h1 a:hover, h2 a:hover, ect 
    color:#000000;

您说悬停时标题应该改变颜色，这不是您想要的。 现在它说包含链接 (a) 的标题在悬停时应该改变颜色。 ;)