in 程式小心得

tr hover 在 IE 上的 hack

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

<table class="changecolor">
<tr><td>test</td><td>test</td><td>test</td></tr>
</table>

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

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

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


$(document).ready(function() {
  $(".changecolor tr").hover(function() {
    $(this).css("background-color","#DDDDDD");
  },function(){
    $(this).css('background-color','#FFFFFF');
  });
});

參考文件:

Write a Comment

Comment