Question

我知道这是一个非常新的问题，但我似乎无法通过谷歌搜索找到答案。我正在使用Chrome插件StyleBot来改变我工作的公司使用的内部工具的CSS。所以我只能访问编辑CSS。

我试图这样做，当我在页面上悬停特定元素时，它会更改背景颜色以突出显示信息。我需要做的是使它只有我正在徘徊的.row元素发生变化。目前，我这样做的方式是更改所有.row元素。基本上，使用一些后端代码生成一个列表，列表中的每个项目都用以下代码编码：

  <span class="row">
    <div class="boxy txtleft"><span title="Agent"></span></div>
    <div class="boxy"><span title="Status"></span></div>
    <div class="boxy txtright"><span title="Last Call"></span></div>    
  </span>

所以在现场环境中，它看起来像这样并且不断重复：

  <span class="row">
    <div class="boxy txtleft"><span title="Agent"></span></div>
    <div class="boxy"><span title="Status"></span></div>
    <div class="boxy txtright"><span title="Last Call"></span></div>    
  </span>      
  <span class="row">
    <div class="boxy txtleft"><span title="Agent"></span></div>
    <div class="boxy"><span title="Status"></span></div>
    <div class="boxy txtright"><span title="Last Call"></span></div>    
  </span>
  <span class="row">
    <div class="boxy txtleft"><span title="Agent"></span></div>
    <div class="boxy"><span title="Status"></span></div>
    <div class="boxy txtright"><span title="Last Call"></span></div>    
  </span>

我用来尝试在我悬停时突出显示一行的CSS：

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

我知道为什么这会改变所有的.row元素，但我无法弄清楚如何只改变我的鼠标结束。任何帮助，将不胜感激！

Answer 1

也许你的意思是行中的每一个（后代）元素：

.row> *:hover   {
    background-color: red;
}

http://jsfiddle.net/maio/tyLayh3c/1/

Answer 2

当您的当前代码悬停时，它不会突出显示所有元素，它会像您想象的那样工作。虽然，你给出的代码都不会突出显示，因为'。''跨度没有大小，它们没有背景的任何宽度或高度。所以下面的代码对我有用：

.row span:hover  {
    background-color: red;
}

这将选择行内的跨距并更改其bg颜色。

Push Notification Plugin

修改

maioman的响应可能会更安全，因为您可能会向.row添加更多不是span的元素，然后它们的背景不会突出显示。所以.row> *:hover {}会更好。

Answer 3

在这里回答我自己的问题。谢谢你们验证代码确实可行。这实际上是网页其余部分的一个问题，所以我现在需要通过并手动告诉它不要将悬停应用于几乎所有其他元素。再次感谢大家！

CSS悬停改变所有类

3 个答案: