html - 如何使 2 个不同的跨度在悬停时改变颜色

Question

问题

我有一个 ，里面的文字是“View Portfolio”，但我还有一个 ，它是一个 Glyphicon。当用户将鼠标悬停在任何 标签上时，我希望它们都变成黑色。

这是 HTML:

    <div class="maincontentportfoliotitle col-lg-offset-2 col-lg-8 text-center">
        <span class="portfolioLink">View Portfolio</span>
    </div>
    <div class="col-lg-offset-2 col-lg-8 text-center">
        <span class="portfolioLink glyphicon glyphicon-chevron-down"/>
    </div>

这是 CSS:

.portfolioLink:hover {
    color: black;
}

目前只有悬停在上面的 标签会改变颜色。

Answer 1

您需要将它们包裹在一个 wrapper 下，然后当 wrapper 悬停时，您将为两个跨度着色。

.portfolioLink:hover{
  color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="portfolioLink">
<div class="maincontentportfoliotitle col-lg-offset-2 col-lg-8 text-center">
        <span>View Portfolio</span>
    </div>
    <div class="col-lg-offset-2 col-lg-8 text-center">
        <span class="glyphicon glyphicon-chevron-down"/>
    </div>
  </div>