區塊互動變色
呈現的結果
這段文字的區塊會變色
原始碼如下:
<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> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
只需要一個定義就可以讓九個儲存格都具有這樣的效果,這就是「包含選擇符」的效果。
|