化妆悬停TR内所有元素

我有流动表：化妆悬停TR内所有元素

<tr class="popular-link"> 
    <td>text</td> 
    <td><i class="icon fa fa-camera-retro fa-lg" style="color: green"></i></td> 
</tr>

而对于这个CSS：

.popular-link:hover {color: #c93434}

我不希望我元素

内的任何文本example

问题是，当我将鼠标悬停在这一行上时，只有文本获取了颜色，而不是<i>元素。当我将鼠标悬停在文本和<i>元素获得此颜色的行上时我想要。我的问题是：是否有可能有相同的规则悬停到<i>元素？

来源

2014-10-07 BrunoRamalho

斜体的元素没有在任何文本，所以你能指望什么文字颜色应用于？ – Quentin 2014-10-07 14:20:04

你的风格还有其他事情正在发生。 [发布的代码可以按照您的需要进行工作。]（http://jsfiddle.net/ygyjzzd4/）请使用（尽可能少的）额外代码更新您的问题，以帮助我们重新制作您的场景。 – Jeroen 2014-10-07 14:20:36

颜色用于文本，背景颜色用于背景颜色。 – jimmy 2014-10-07 14:20:50

看这一个。它的工作原理：http://jsfiddle.net/csdtesting/gnz7o2e9/

.popular-link { 
 
    color: blue; 
 
} 
 
.popular-link *> .icon { 
 
    color: green; 
 
} 
 
.popular-link:hover *> .icon { 
 
    color: grey; 
 
} 
 
.icon { 
 
    color: red; 
 
}

<table> 
 
    <tr class="popular-link"> 
 

 
    <td>text</td> 
 

 
    <td><i class="icon">mock icon</i> 
 
    </td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr class="popular-link2"> 
 
    <td>text</td> 
 
    <td class="icon">mock icon</td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 

 
</table>

来源

2014-10-07 14:49:45

with！重要的作品像一个魅力，我不知道这个规则*>谢谢 – BrunoRamalho 2014-10-07 14:52:48

！重要的不是工作http://jsfiddle.net/csdtesting/rnfxapn4/。只有这个全球选择器适合我！ :) – 2014-10-07 14:56:44

颜色的任何文本，如果你想突出的背景使用

.popular-link:hover 
{ 
background-color: #c93434; 
}

，如果你想改变图标的颜色，你必须在你的颜色设计一个图标，并使用该图像中徘徊。

来源

2014-10-07 14:25:03

我不想背景。我只希望i元素是这个颜色，并且在 – BrunoRamalho 2014-10-07 14:26:58

里面没有文字，而不是在i元素上使用这个css？ – 2014-10-07 14:30:42

如果我使用.popular-link i：hover {color：＃c93434}我需要将鼠标悬停在我所在的位置，但我想在tr上的任何位置悬停，一切都将变为红色 – BrunoRamalho 2014-10-07 14:33:56

化妆悬停TR内所有元素

回答

相关问题