Question

问题

我有一个＆lt; span＆gt; ，其中包含“View Portfolio”中的文字，但我还有一个＆lt; span＆gt; 这是一个Glyphicon。当用户将鼠标悬停在任何＆lt; span＆gt; 标签我希望它们都变黑。

这是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;
}

目前只有＆lt; span＆gt; 标记我将鼠标悬停在更改颜色上。

Answer 1

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

＆＃13;

.portfolioLink:hover{
  color: red;
}

＆＃13;

<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>

＆＃13;

Answer 2

除了其他答案之外，如果你不希望容器中的所有东西都改变颜色，你可以这样做：

https://jsfiddle.net/haccej6L/

<div id="container">
<span class="type1">Blah</span>
<span class="type2">Foo</span>
<span class="type1">Blah</span>
</div>

#container
{
  background-color: white;
}

#container:hover .type1
{
  color: red;
}

Answer 3

只需给你的div包围你所给予他们的班级。这是因为你做的事情使得每个跨度在盘旋时变黑。如果您将类分配给围绕两个跨度的div，它会将悬停应用于两者，但将其共享。

所以

<div class = "portfolioLink">
  <span></span>
  <span></span>
</div>

可以使用您的班级portfolioLink

Answer 4

＆＃13;

div:hover + div > span {
  color: red;
}

＆＃13;

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

＆＃13;

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

问题

4 个答案: