想要使用 Javascript 在悬停时显示 <tr>答案

【问题标题】：Want to show a <tr> on hover using Javascript想要使用 Javascript 在悬停时显示 <tr>
【发布时间】：2014-12-06 00:29:37
【问题描述】：

<head>
<title>On hover testing</title>
<style>
.hover:hover{
color:#F00;

}
.result{
display:none;
height:100px;
width:50px;
}

</style>
</head>

<body>
<table>
<tr>
<td class="hover">Hover over me
</td>
</tr>
<tr class="result">
<td>This text shows on hover only
</td>
</tr>
<tr>
<td>this is second line
</td>
</tr>
</table>
</body>
</html>

我正在尝试显示唯一的 on-hover 。请指导我如何使用 java 脚本显示它。我在学习阶段请指导我。谢谢

【问题讨论】：

您正处于学习阶段，您一定尝试过吧？向我们展示您的代码！

标签： javascript jquery html css

【解决方案1】：

在没有你的任何代码的情况下，基本思路如下：

$('.hover').hover(function(){
    $('.result').show();
},function(){
    $('.result').hide();
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/bj09dfq4/1/

jQuery hover 函数有两个参数。鼠标进入元素时调用的函数，离开元素时调用的函数。

在这种情况下，这些函数除了 http://api.jquery.com/show/enter link description here 和 hide 另一个 class="result" 元素之外什么都不做。

您需要在页面中包含 jQuery，在使用它的任何脚本之前。例如在head:

<head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

如果您的脚本放置在页面中的元素之前，您还需要将其包装在一个 DOM 就绪处理程序中：

<script type="text/javascript">
    $(function(){
        $('.hover').hover(function(){
            $('.result').show();
        },function(){
            $('.result').hide();
        });
    });
</script>

注意事项：

$(function(){....}); 只是$(document).ready(function(){...}); 的便捷快捷方式

对于@Pete_Gore，总是有可能让事情变得更流畅：

JSFiddle： http://jsfiddle.net/TrueBlueAussie/bj09dfq4/

    $(function(){
        $('.hover').hover(function(){
            $('.result').toggle();
        });
    });

hover() 还允许使用单一的“输入/输出”方法，并且toggle() 在hide() 和show() 之间切换。

【讨论】：

请解释一下如何添加jQuery
哦，那些俏皮的澳大利亚人。
现在完美了^^
@Pete_Gore: 代码从不完美，但对于新手来说就可以了 :)
嗯，我觉得5行代码就可以完美了^^

【解决方案2】：

您必须将 JavaScript 悬停事件添加到 .hover 类，如下所示：

$('.hover').hover(
    function() {
        // onmouseover
        $('.result').show();
    }, function() {
        // onmouseexit
        $('.result').hide();
    }
);

请参阅 jQuery Hover 文档here

【讨论】：