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.

这篇关于jQuery悬停在表格上的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！