Question

HTML

<p id="para"> This is a paragraph</p>

JS / Jquery的

$("para").hover(function() {$(this).hide();}, function() {$(this).show();});

现在我想要的是当鼠标在段落上时，元素应该隐藏，当鼠标离开元素时应该再次可见。然而该段落并未隐藏，因此也没有出现。这有什么不对？

Answer 1

你错过了＃ ID选择器，只有“para”正在寻找标签<para>（在这种情况下当然不存在。

$("#para")

在旁注中，你通常希望有某种div（设定大小，比方说）等等，这样的情况就是这样，并且有悬停事件的来源，并且内部div显示。使它不那么“滑”。

此外，如果您使用div执行此操作，则可以使用CSS：

div:hover #para { display:block; }

jsFiddle CSS example

Answer 2

您错过了“＃”ID。

$("#para").hover(function() {$(this).hide();}, function() {$(this).show();});

Answer 3

假设缺少#作为OP中的拼写错误..您的代码无法正常工作..因为鼠标输出将在元素被隐藏时触发。

DEMO： http://jsfiddle.net/s8cpz/

Answer 4

此代码永远不会有效。当你在它上面盘旋时，它会立即消失，对吧？然而，当它消失时，鼠标仍然在它上面，因此消失的p将它注册为mouseleave，（它看到的只是光标与它分开，光标是否是罪魁祸首，或它本身，它并不关心），有效地触发mouseleave的{{1}}处理程序，这将无限期地继续，导致hover的快速眨眼。您可以p代替$("p").css({opacity',0.01})。使用以下代码检查问题：

$('p').hide()

将鼠标放在<!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ setTimeout(function() { $("p").hide(); },10000); $("#para").mouseleave(function() {alert('cool');}); }); </script> </head> <body> <p id="para"> This is a paragraph</p> </body> </html>上，10秒后，当p消失时，您会看到警告弹出，表示p处理程序已触发。

Answer 5

如果你用（'＃para'）改正（'para'）你无法得到你的目标，因为当你隐藏p标签时，立即鼠标输出事件激活和hide（）方法运行，你的标签开始闪烁直到鼠标光标结束。它这个解决方案可能会有所帮助。

$("#body").hover(function(){
$("#para").css("visibility","hidden");},
            function() 
            {$("#para").css("visibility","visible");
            }
           ); 

<div id="body">
  <p id="para"> This is a paragraph</p>
<div>

DEMO

Answer 6

首先，你错过了＃，第二，当一个元素隐藏时，它的css显示属性变为none，所以它在页面上没有空间，所以鼠标不在它上面再也，它会再次出现。这会创建一个无限循环的排序。像这样的错误纯属逻辑，有时甚至会破坏旧版本的浏览器。

Jquery悬停功能无法正常工作

6 个答案: