Question

如何在鼠标悬停时更改跨度的颜色？我目前有一个标签（如菜单中）已被归类为跨度，让我们说.rtsOut，背景色为＃595959。每个选项卡仍然被分类为相同的范围，.rtsOut，但分为4个不同的选项卡。当我鼠标悬停时，我想将一个标签更改为＃000000，并在鼠标移出范围时恢复为＃595959。

我很遗憾没有像以下那样访问整个CSS：

<style>
span:hover {
  background: ######;
}
</style>

而我有一个非常简单的视图，我只输入单行代码：

#SampleThing {visibility: hidden;}

任何人都可以帮助我吗？我一直在谷歌搜索，并测试了几个小时，并且无法提出解决方案。

到目前为止，这是我发现的。我相信这是跨度的创建方式：

 <li class="rtsLI"> == $0
      <a class="rtsLink tbLeft4" id="TbInformation" href="../Info/Info.aspx">
           <span class="rtsOut">
                <span class="rtsIn">
                     <span class="rtsTxt">Edit Information</span>
                </span>
           </span>
      </a>
 </li>

我尝试使用以下方法更改该范围的背景颜色：

 .rtsOut:hover {background: #000000;}

然而，这行代码不起作用：（

Answer 1

当我鼠标悬停时，我想将一个标签更改为＃000000和当鼠标移出范围时，恢复到＃595959。

＆＃13;

 .rtsOut:hover {background: #000000;}

＆＃13;

 <span class="rtsOut">
      <span class="rtsIn">
           <span class="rtsTxt">Edit Information</span>
      </span>
 </span>

＆＃13;

Answer 2

查看我的codePen here

CSS

.rtsOut:hover{
    background-color: red;  
}

HTML（假设它看起来像这样）

<div>
    <p>
        <span class="rtsOut">One</span>
        <span class="rtsOut">Two</span>
        <span class="rtsOut">Three</span>
    </p>
</div>

另请注意，如果您希望获得更多灵活性，可能需要考虑使用<ul>和<li>进行导航菜单项。

Answer 3

假设您的HTML确实是：

 <span class="rtsOut">
      <span class="rtsIn">
           <span class="rtsTxt">Edit Information</span>
      </span>
 </span>

并且这不起作用：

 .rtsOut:hover {background: #000000;}

然后，它告诉我某人已经生成了更具体的样式＆＃34;而不是你提供的那些。

CSS样式规则应用于＆＃34;最具体到最不具体的＆＃34;。例如：parent > .rtsOut { background-color: red; }优先于.rtsOut { background-color: blue; }，因为它更具体。同样，内联样式将具有最高优先级之一，因此<span class="rtsOut" style="background-color:red;"></span>将覆盖.rtsOut { background-color: blue; }。有关详细信息，请参阅http://vanseodesign.com/css/css-specificity-inheritance-cascaade/。

我首先将!important添加到您的样式中（因为如果没有其他任何内容!important，它将始终具有最高优先级），以查看上述情况是否正确。

另外，我绝对会习惯浏览器开发人员工具。它们允许您深入研究活动代码并进行实时编辑。您将能够看到内联样式或其他样式规则是否优先于您尝试提供的样式。

CSS：在鼠标悬停时更改跨度颜色

3 个答案: