« 歷史上的今天-2008.10.12  •  於 mysql 裡使用 custom sort »

tr hover 在 IE 上的 hack

十一月 8, 2008 in 程式小心得 by whatup

昨天想要在作在 table 上移動滑鼠時，滑鼠指到的該行會改變顏色作為顯示，假設目前有下列 html 結構的話：

  1. <table class="changecolor">
  2. <tr><td>test</td><td>test</td><td>test</td></tr>
  3. </table>

在 firefox 上可以直接用下列方式達成：

  1. tr.changecolor:hover {
  2.   background-color:#CCFF99;
  3. }

但在 IE 下不能這樣搞，對 IE 而言 hover 只能使用在 a 這個 tag 使用，所以要配上 javascript 作 hack 的動作。首先載入 jquery-min.js 後，再使用下列程式即可達成同樣的效果。

  1. <script language="javascript">
  2. $(document).ready(function() {
  3.   $(".changecolor tr").hover(function() {
  4.     $(this).css("background-color","#DDDDDD");
  5.   },function(){
  6.     $(this).css('background-color','#FFFFFF');
  7.   });
  8. });
  9. </script>

參考文件：

 

分類

google adsense