Question

当鼠标悬停在标签h2和p上时，我想改变链接的颜色。问题是当鼠标悬停在它们上面时，我只能看到它们下面的边框。我尝试了很多东西，但仍然无法解决它。这是HTML代码和CSS。

.info:hover{
   color:yellow;

 }

 h2{
   border-bottom: 1px solid #999;
   color :#999;
   padding-bottom: 5px;
   font-family:OpenSansI;
   font-size:25px;
}

p{
   color :#999;
   font-family:OpenSansI;

  }

<div class="row" >
        <div  class="col-md-4 col-sm-12">
        <a class="info" href="http://www.w3schools.com">
            <h2>Who am I...</h2>
            <p>I am</p>

        </a>
        </div>

        <div class="col-md-4 col-sm-12">
        <a  class="info" href="#">
            <h2>My CV</h2>
            <p>CV</p>

        </a>
        </div>

        <div class="col-md-4 col-sm-12">
        <a class="info" href="#">
            <h2>Contact with me</h2>
            <p>Mail</p>

        </a>
        </div>

    </div>

Answer 1

因为你的链接中有另一个元素，你也必须引用它。

.info h2:hover, p:hover {
    color:yellow;
}

示例 - https://jsfiddle.net/dL9uz1d3/1/

更新的答案

更新示例 - https://jsfiddle.net/dL9uz1d3/11/ 很明显，你希望它们作为一个整体发挥作用。那里有很多关于css的教程。检查其中一些是没有害处的。无论如何这里是一个更新的答案

<div class="row" >
    <div  class="col-md-4 col-sm-12">
    <a class="info" href="http://www.w3schools.com">
        <h2>Who am I...</h2>
        I am
    </a>
    </div>
</div>

a:link {
    text-decoration:none;
    color :#999;
   font-family:OpenSansI;
}
a.info:hover, h2:hover {
   color:yellow;
   text-decoration: none;
}
h2{
   border-bottom: 1px solid #999;
   color :#999;
   padding-bottom: 5px;
   font-family:OpenSansI;
   font-size:25px;
}

默认情况下，链接带有下划线。要删除您设置text-decoration: none;

的链接下划线

Answer 2

.info是什么颜色并不重要。 .info元素中的所有文字都包含在h2或p元素中，并且它们设置了自己的颜色（因此它们不是color: inherit）。

您需要明确定位它们：

.info {
    color: #999;
}

.info:hover {
    color: yellow;
}

.info h2,
.info p {
    color: inherit;
}

Answer 3

执行您想要的操作非常容易，并且使用A标签中的H2和P标签保持相同的标记。通过在:hover类上添加.info，您可以确保在悬停时更改内部的任何内容。

.info:hover h2, .info:hover p {
  color:yellow;
}

JSFIDDLE

希望这就是你要找的东西。

如何在鼠标悬停在链接上时更改链接颜色

3 个答案: