Question

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

我试图展示唯一的悬停。请指导我如何使用java脚本显示它。我正在学习阶段，请指导我。感谢

Answer 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之前，您需要在页面中包含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()还允许在hide()和show()之间进行单个“进/出”方法和toggle()切换。

Answer 2

您必须在.hover课程中添加JavaScript悬停事件，如下所示：

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

请参阅jQuery Hover文档here

想要使用Javascript显示悬停

2 个答案: