【问题标题】:change h1 hover color only for links仅为链接更改 h1 悬停颜色
【发布时间】: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 所以你还需要发布你的标记。请与您的尝试分享小提琴

标签: css hyperlink colors hover


【解决方案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) 的标题在悬停时应该改变颜色。 ;)

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-11-24
        • 2016-05-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-12-01
        相关资源
        最近更新 更多