更改顏色的數量取決於其上徘徊

我有這個表：更改顏色的數量取決於其上徘徊

<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

更改顏色的數量取決於其上徘徊

回答

相關問題