0

HTML

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

JS/jQuery

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

现在我想要的是当鼠标在段落上时，元素应该隐藏，当鼠标离开时，元素应该再次可见。但是，该段落都没有隐藏，因此不会出现。这里有什么问题？

4

6 回答 6

3

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

$("#para")

在旁注中，您通常希望将某种div（假设是固定大小）等包裹在这样的情况下，并且从那里获取悬停事件，并显示内部 div。使它不那么“跳跃”。

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

div:hover #para { display:block; }

jsFiddle CSS 示例

于 2012-09-26T17:42:19.193 回答
2

您错过了 ID 的“#”。

$("#para").hover(function() {$(this).hide();}, function() {$(this).show();});
于 2012-09-26T17:42:54.240 回答
2

假设缺少#作为 OP 中的错字..您的代码将无法按预期工作..因为隐藏元素时将触发鼠标移出。

演示：http: //jsfiddle.net/s8cpz/

于 2012-09-26T17:46:19.433 回答
0

这段代码永远不会起作用。当您将鼠标悬停在它上面时，它应该会立即消失，对吗？但是，当它消失时，鼠标仍然在它上面，因此消失p会将其注册为mouseleave, （它所看到的只是光标与它分开，无论光标是罪魁祸首，还是它本身，它都没有' t care)，有效地触发 的mouseleave处理程序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>

将鼠标保持在 上p，10 秒后，当p消失时，您将看到警报弹出，表示mouseleave处理程序已触发。

于 2012-09-26T17:48:50.933 回答
0

如果你用 ('#para') 更正 ('para') 你就不能达到你的目标，因为当你立即隐藏 p 标签时 mouseout 事件激活和 hide() 方法运行并且你 p 标签开始闪烁直到鼠标光标悬停。这个解决方案可能会有所帮助。

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

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

演示

于 2012-09-26T17:50:04.217 回答
0

首先，你错过了#，其次，当一个元素隐藏时，它的 css display 属性变为 none，因此它不占用页面空间，所以鼠标不再在它上面，它会再次显示。这会创建一个无限循环。像这样的错误纯粹是合乎逻辑的，有时甚至会使旧版本的浏览器崩溃。

于 2012-09-26T17:52:34.403 回答