更改颜色的数量取决于其上徘徊

我有这个表：更改颜色的数量取决于其上徘徊

<table> 
      <tr> 
       <td class="order-delivered"><i>order</i><br/><i>delivered</i><br/> 
        <a class="check-mark">✔</a> 
       </td> 
       <td class="prep-pizza"><i>prep</i><br/><i>pizza</i><br/> 
        <a class="check-mark">✔</a> 
       </td> 
       <td class="bake-pizza"><i>bake</i><br/><i>pizza</i><br/> 
        <a class="check-mark">✔</a> 
       </td> 
       <td class="out-for-deliver"><i>out for</i><br/><i>delivery</i><br/> 
        <a class="check-mark">✔</a> 
       </td> 
      </tr> 
     </table>

我要的是，当我在prep-pizza类盘旋，它会改变的a文本颜色prep-pizza和order-delivered。

当我徘徊在bake-pizza它会改变的a文本颜色prep-pizza和order-delivered和bake-pizza

，最后当我out-for-deliver徘徊它会改变的a所有td的文本颜色。

而顺便说一句，复选标记只有着色不是其他字符。

我该如何实现这种类型的悬停，它将针对来自不同类别的多个a。

编辑：

取决于其中，他们目前徘徊在当前位置的它会改变颜色。

当我只是盘旋order-delivered它只会改变为order-delivered。

来源

2014-09-24 Rod_Algonquin

所以，你想要的是颜色的所有您目前的项目以前，兄弟姐妹盘旋在...？ – 2014-09-24 00:18:48

@TarynEast不，添加上面的编辑。 – 2014-09-24 00:20:59

@JoshCrozier你能给我一个特定的链接到我的问题？ thx – 2014-09-24 00:22:01

希望我知道你想，这什么应该做的伎俩

tr:hover .check-mark, 
td:hover .check-mark { 
    color: blue; 
} 

td:hover ~ td .check-mark { 
    color: black; 
}

尝试在这里http://jsfiddle.net/1n75v7y1/

来源

2014-09-24 00:35:16 jenriquer

这个工作很好。 – 2014-09-24 00:43:37

这真棒，但我发现很难弄清楚它为什么起作用（我的CSS-fu只是“令人满意”）......你能解释两个样式块和它们是如何一起工作的吗？ – 2014-09-24 04:13:34

试试这个CSS，它只能改变当前悬停元素...如果您需要更改另一个sibilings，那么你需要使用JavaScript或jQuery的

.order-delivered:hover{ 
background-color: red; 
} 
.prep-pizza:hover{ 
background-color: red; 
} 
.bake-pizza:hover{ 
background-color: red; 
} 
.out-for-deliver:hover{ 
background-color: red; 
}

来源

2014-09-24 00:29:53 Chico3001

更改颜色的数量取决于其上徘徊

回答

相关问题