jQuery悬停在表格上的效果答案

【问题标题】：jQuery hover effect over tablejQuery悬停在表格上的效果
【发布时间】：2011-07-09 10:26:55
【问题描述】：

我是 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>

【问题讨论】：

你的代码很完美，你最好使用.addClass

标签： jquery css hover html-table

【解决方案1】：

由于样式通常比红色文本更复杂，您可以考虑走这条路：

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

redHover 类似于

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

然后你可以不用重写你的jQuery就可以改变样式。

【讨论】：

【解决方案2】：

一个小解决方法：

<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>/

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

jQuery 中的

.hover() 函数有两个参数：一个函数用于鼠标进入事件，第二个函数用于鼠标退出：

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

PS：一般来说，在像您这样的情况下，最好更改元素的类而不是 css 属性本身。使用 .addClass() 和 .removeClass()。这样以后就更容易实现悬停效果了，只需要改css而不是javascript。

【讨论】：

【解决方案5】：

您需要在悬停时添加处理程序。在这里看到它：http://jsfiddle.net/bF9xy/ 此处的文档：http://api.jquery.com/hover/

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

【讨论】：

【解决方案6】：

您需要做的就是传递另一个函数来悬停鼠标离开。

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

请参阅jsfiddle 上的示例。

或者你也可以只在 css 中完成。

tr:hover{
    color:red;
}

IE 5/6 只支持链接。 IE 7 支持:hover，但不支持:active, on 所有元素。来自here。

【讨论】：