星期日, 12月 24, 2006

區塊互動變色

呈現的結果

這段文字的區塊會變色
原始碼如下:
<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>

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