jQuery悬停在表格上的效果

Posted

技术标签:

【中文标题】jQuery悬停在表格上的效果【英文标题】：jQuery hover effect over table 【发布时间】：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 【参考方案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。

【讨论】：

以上是关于jQuery悬停在表格上的效果的主要内容，如果未能解决你的问题，请参考以下文章

在两个表格中添加 jQuery 悬停效果

悬停在一个元素上会导致使用jQuery对其他元素产生悬停效果

表中 <hr> 的悬停效果

GridView 上的 jQuery 函数在页面回发后停止工作（鼠标悬停，单击）

带有“鼠标方向”的悬停的 jQuery 动画

jQuery - 具有悬停效果的多个项目