突出顯示錶格單元但沒有填充區域

我有一個表格列，並且此表格列中還有其他div。在鼠標懸停時，我想突出顯示所有內容（內部有多個div）。我有這個工作，但這是問題。突出顯示錶格單元但沒有填充區域

也有一些從四面填充。當我應用CSS：懸停效果時，我不希望填充區域受到影響。相反，除了填充區域之外，div內的其他內容都應該突出顯示。

下面是HTML

<table id="MyTable"> 
    <tr> 
     <td style="padding:120px;"> 
      <div>SomeStuff</div> 
      <div>SomeMoreStuff</div> 
     </td> 
    </tr> 
</table>

這裏是CSS

#MyTable td { /* added only for visualisation */ 
    border:1px solid red; 
} 
#MyTable td:hover { 
    background: black; 
}

JsFiddled here

來源

2013-04-12 user1006072

工作小提琴：http://jsfiddle.net/9zzcY/

更改HTML到：

<td style="padding:20px;"> 
    <div class="tdContentWrapper"> 
    <div>SomeStuff</div> 
    <div>SomeMoreStuff</div> 
    </div> 
</td>

更改CSS來：

#MyTable .tdContentWrapper:hover{ 
    background: black; 
}

來源

2013-04-12 17:02:46 Arbel

嗨@阿貝爾，完美的作品！但是，我想如果有一個CSS屬性，你可以指定你的填充區域是否應該突出顯示。 – user1006072

沒有用於更改填充區域的背景顏色的CSS屬性，但可以通過更改表格單元格的背景顏色（或突出顯示它的名稱）並指定單元格的默認背景顏色（顏色在更改之前填充區域的內容塊）添加到單元格的內容塊（在本例中爲.tdContentWrapper），以使其看起來像只填充區域已更改背景顏色。例如：http://jsfiddle.net/9zzcY/1/ – Arbel

改變你的風格聲明：

td:hover div {

來源

2013-04-12 17:00:51 Stefan

這根本不起作用。我的CSS如下 #MyTable td：hover div {background：black;} – user1006072

次嘗試是

td:hover div{ 
//your code here 
}

來源

2013-04-12 17:01:35

沒有爲我工作。謝謝 – user1006072

嘗試插入內markkup您的設計女巫不會溢出填充。

<table id="MyTable"> 
    <tr> 
     <td style="padding:120px;"> 
      <div class="inner-td"> 
       <div>SomeStuff</div> 
       <div>SomeMoreStuff</div> 
      </div> 
     </td> 
    </tr> 
</table>

並且將樣式應用到 '內TD' 上分頻器的TD：徘徊

jsFiddle updated here

#MyTable td { /* added only for visualisation */ border:1px solid red; } #MyTable td:hover .inner-td { background: black; }

另外，需要注意的是：上比<a>元素以外的任何徘徊在許多較舊的瀏覽器中不完全支持。

來源

2013-04-12 17:18:44

您是否複製了我在15分鐘前寫過的內容？ – Arbel

@阿貝爾不，我沒有。 –

雖然這兩種解決方案是相似的 - 兩個答案都很好。謝謝你的幫助。 – user1006072

突出顯示錶格單元但沒有填充區域

回答

相關問題