jQuery懸停效果在表

我是jQuery的新手，我試圖讓我的桌上懸停效果，但我不知道如何。我只想讓文字變紅，然後在焦點丟失時再次移除紅色。jQuery懸停效果在表

這是我到目前爲止有：

<script type="text/javascript"> 
$(function() { 
    $('tr').hover(function() { 
     $(this).css('color', 'red') 
    }); 
}); 
</script> 


<table border="1"> 
    <tr> 
     <th>ID</th> 
     <th>name</th> 
    </tr> 
    <tr> 
     <td>#1</td> 
     <td>ole</td> 
    </tr> 
    <tr> 
     <td>#2</td> 
     <td>jeffrey</td> 
    </tr> 
    <tr> 
     <td>#3</td> 
     <td>collin</td> 
    </tr> 
    <tr> 
     <td>#4</td> 
     <td>eve</td> 
    </tr> 
</table>

來源

2011-03-05 Sjmon

你的代碼是完美的，最好使用'.addClass' – diEcho 2011-03-05 14:48:47

所有你需要做的是通過另一個函數徘徊在鼠標離開。

$('tr').hover(function() { 
    $(this).css('color', 'red'); 
}, function() { 
    $(this).css('color', ''); 
});

請參閱jsfiddle上的示例。

或者你也可以只在CSS中做到這一點。

tr:hover{ 
    color:red; 
}

IE 5/6支持僅在鏈接。 IE 7支持：懸停，但不是：有效，在所有元素。從here。

來源

2011-03-05 14:46:49

您需要在懸停時添加處理程序。見這裏：http://jsfiddle.net/bF9xy/ 文檔這裏：http://api.jquery.com/hover/

$(function() { 
    $('tr').hover(function() { 
     $(this).css('color', 'red') 
    },function() { 
     $(this).css('color', 'black') 
    } 
); 
});

來源

2011-03-05 14:49:13 DhruvPathak

.hover（）在jQuery函數有兩個參數：用於在事件的一個鼠標功能和用於將鼠標從第二功能：

$('dom element').hover(function() 
{ 
    //your code for mouse over 
}, function() 
{ 
    //your code for mouse out 
});

PS：一般來說，在像你這樣的情況下，最好改變元素的類而不是css屬性本身。使用.addClass（）和.removeClass（）。通過這種方式，將來可以更容易地使用懸停效果，只需更改CSS而不是javascript即可。

來源

2011-03-05 14:51:57 Bakaburg

<style type="text/css"> 
.highlight { background-color:red; } 
<style> 
<script> 
$(
function() 
{ 
    $("table>tr").hover(
    function() 
    { 
    $(this).addClass("highlight"); 
    }, 
    function() 
    { 
    $(this).removeClass("highlight"); 
    } 
) 
} 
) 
</script>

來源

2011-03-05 14:52:04 diEcho

小解決方法：

<html> 
    <head> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('tr').hover(function() { 
        $(this).css('color', 'red') 
       }); 
       $('tr').mouseout(function() { 
        $(this).css('color', 'black') 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <table border="1"> 
      <tr> 
       <th>ID</th> 
       <th>name</th> 
      </tr> 
      <tr> 
       <td>#1</td> 
       <td>ole</td> 
      </tr> 
      <tr> 
       <td>#2</td> 
       <td>jeffrey</td> 
      </tr> 
      <tr> 
       <td>#3</td> 
       <td>collin</td> 
      </tr> 
      <tr> 
       <td>#4</td> 
       <td>eve</td> 
      </tr> 
     </table> 
    </body> 
</html>/

來源

2011-03-05 14:53:19 Zakaria

由於款式通常比紅色文字更復雜，你可能會考慮走這條路：

$(function() { 
$('tr').hover(function() { 
    $(this).toggleClass('redHover') 
     }, function() { 
    $(this).toggleClass('redHover') 
    }); 
});

redHover會像

<style> 
.redHover{ 
    color:red; 
} 
</style>

然後你c改變樣式而不重寫你的jQuery。

來源

2011-03-05 14:54:36

jQuery懸停效果在表

回答

相關問題