Question

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

Answer 1

您需要做的就是通过另一个功能来悬停鼠标。

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

请参阅jsfiddle上的示例。

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

tr:hover{
    color:red;
}

IE 5/6仅支持链接。 IE 7支持：悬停，但不是：活动，开启所有元素。来自here。

Answer 2

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

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

Answer 3

jQuery中的 .hover（）函数有两个参数：一个用于事件中鼠标的函数，另一个用于鼠标输出的函数：

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

PS：一般来说，在像你这样的情况下，最好更改元素的类而不是css属性本身。使用.addClass（）和.removeClass（）。这样，通过更改css而不是javascript，将来更容易获得悬停效果。

Answer 4

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

Answer 5

一点解决方法：

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

Answer 6

由于样式通常比红色文本更复杂，因此您可以考虑使用此路径：

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

redHover就像是

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

然后你可以在不重写jQuery的情况下改变风格。

jQuery悬停效果超过表

6 个答案: