滑鼠啟用顯示背景色,我們該如何編寫這樣的代碼呢?我們來整理一下思路:把a裡的部分設定成一個塊元素,然後定義滑鼠放上後的樣式。CSS1中:hover只對a元素起作用,CSS2中:hover應用於所有元素.而IE7也沒同樣沒有支援CSS2中的這個標準。所以為了適應所有瀏覽器還是要定義在a中.
代碼運行效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無序列表UL 滑鼠啟用顯示背景色的執行個體</title><style type="text/css">#links ul {list-style-type: none;width: 280px;}#links li {border: 1px dotted #06f;border-width: 1px 0;margin-bottom: 16px;}#links li a {color: #00f;display: block;font: bold 120% Arial, Helvetica, sans-serif;padding: 8px;text-decoration: none;}* html #links li a { /* make hover effect work in IE */width: 280px;}#links li a:hover {background: #f0f0f0; color:#036;}#links a em {color: #666;display: block;font: normal 85% Verdana, Helvetica, sans-serif;line-height: 125%;}#links a span {color: #999;font: normal 70% Verdana, Helvetica, sans-serif;line-height: 150%;}</style></head><body><div id="links"><ul><li><a href="#" title="CSS Web Design">CSS Web Design<em>xhtml+css div+css - cnn6.net??</em> <span>cnn6.net??</span></a></li><li><a href="#" title="CSS Web Design">CSS Web Design<em>xhtml+css div+css - cnn6.net??</em> <span>cnn6.net??</span></a></li></ul></div></body></html>