jQuery悬停在表格上的效果
我是 jQuery 新手,我正在尝试在我的桌子上制作悬停效果,但我不知道如何操作.我只想将文本设为红色,然后在失去焦点时如何再次删除红色.
这是我目前所拥有的:
<script type="text/javascript">$(函数(){$('tr').hover(函数() {$(this).css('color', 'red')});});</脚本><表格边框="1"><tr><th>ID</th><th>名字</th></tr><tr><td>#1</td><td>ole</td></tr><tr><td>#2</td><td>杰弗里</td></tr><tr><td>#3</td><td>柯林</td></tr><tr><td>#4</td><td>前夕</td></tr></表>
解决方案 你需要做的就是传递另一个函数来悬停鼠标离开.
$('tr').hover(function() {$(this).css('color', 'red');}, 功能() {$(this).css('color', '');});
请参阅 jsfiddle 上的示例.
或者你也可以只在 css 中完成.
tr:hover{红色;}
<块引用>
IE 5/6 只支持链接.IE7 支持:hover,但不支持:active, on所有元素.来自这里.
I am new to jQuery and I am trying to make a hover effect on my table but I don't know how. I would like to make only the text red and then how to remove the red color again when the focus has been lost.
This is what I have so far:
<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>
解决方案
All you need to do is pass another function to hover for the mouse leave.
$('tr').hover(function() {
$(this).css('color', 'red');
}, function() {
$(this).css('color', '');
});
See example on jsfiddle.
Or you could do it only in css as well.
tr:hover{
color:red;
}
IE 5/6 supports both only on links. IE 7 supports :hover, but not :active, on all elements. from here.
相关文章