區塊互動變色

呈現的結果

這段文字的區塊會變色

原始碼如下：

<style type="text/css">
.chcolor:hover{background:#FF0000;}
</style>
<div class="chcolor">這段文字的區塊會變色</div>

不一定都要用div標籤，事實上，只要套用這個class的任何標籤 都可以產生作用

這是套用class="chcolor"的超連結

這是段普通文字，這裡的文字又套用了class="chcolor"屬性，這裡又是段普通的文字

沒辦法使用html標籤的style屬性來定義

這個方法沒有辦法像一般都使用「style=""」來定義，得使用<style>定義來做才行。雖然步驟上有些麻煩，但在某些情況下還是會有好處的，請參考以下範例

呈現的效果 原始碼如下：

<style type="text/css">
.tableHover td:hover{background:#FF0000;}
</style>

<table width="100" border="1" cellspacing="2" cellpadding="2">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

只需要一個定義就可以讓九個儲存格都具有這樣的效果，這就是「包含選擇符」的效果。