Javascript jqueryshow&；隐藏不起作用，但对样式的本机更改。显示不起作用

为什么在block/none之间切换显示有效，而jQuery显示/隐藏无效

Javascript:

<div style="width: 100px; height: 100px; background-color: red;"
     onmouseover="document.getElementById('div1').style.display = 'block';" 
     onmouseout="document.getElementById('div1').style.display = 'none';">
   <div id="div1" style="display: none;">Text</div>
</div>

正文

jQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div style="width: 100px; height: 100px; background-color: red;" 
     onmouseover="$('#div1').show();" onmouseout="$('#div1').hide();">
   <div id="div1" style="display: none;">Text</div>
</div>

正文

我建议使用jquery，并尽量将CSS（设计）、html（标记）和javascript（交互）始终分开。将来使用jQuery这样的框架可以避免出现问题

下面的代码是在jquery中使用mouseover的示例：

$(document).ready(function() { //starts after all html is loaded (after dom is loaded)
  $('#div1').hide();
  $("div.container").mouseover(function() {
    $('#div1').show();
  }).mouseout(function(){
    $('#div1').hide();
  });
});

现在使用CSS进行样式设置：

.container {
  width: 100px; height: 100px; background-color: red;
}

因此，您的html可以是语义正确的：

<div class="container">
   <div id="div1">Text</div>
</div>

正文

它们似乎工作原理相同：

---

如果在本地文件上进行测试，浏览器可能默认为

src

的

文件

方案。使用开发人员工具确认脚本的响应代码。

如果父div是代码中的第一个div，则您可以使用

$（'div:first'）

或将id提供给父div

<script>
    $(function(){
     $('#div1').hide();
     $('div#Parent').hover(function(){
     $('#div1').toggle();
     });
    });
</script>


<div id="Parent" style="width: 100px; height: 100px; background-color: red;">
   <div id="div1">Text</div>
</div>

$（函数（）{
$（'#div1'）.hide（）；
$（'div#Parent'）。悬停（函数（）{
$（'#div1'）。toggle（）；
});
});
正文

---

使用

hover（）

和

toggle（）

使您的代码简洁，相当于您需要的事件。

jQuery版本在这里似乎很管用：适合我。一定是别的东西。完整页面的来源是什么？省略http：让浏览器决定是使用http还是https。这是完全正确的Blender说到省略http，虽然可以在web上这样做，但您不应该在电子邮件中这样做，因为一些旧版本的outlook不理解它。如果我尝试//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js或//google.com，我的浏览器假定方案是

file

。如果我使用这个方案，他的代码会按预期工作。因此，虽然Tim Berners Lee可能会说这是有效的，但这很可能是他的代码不起作用的原因。“我的浏览器假设该方案是文件”只有当你在HTML页面上看到

file://

时，我在url中犯了一个错误，从google cdn进行cop/粘贴时。。。jquery源中缺少http。谷歌应该这么说。我完全同意应该避免内联javascript，尤其是在使用框架时。但是我很确定OP的代码应该可以正常工作，除了无效的

src

。我不喜欢内联JS，但这不是问题所在。当页面加载时，Jquery并不是在寻找$（'#div1'），而是在MouseOver上寻找它，这一点在描述性属性名称中应该非常明显。我猜这是我解释的错误部分，因为只有在操作发生时才会触发onmouseover和onmouseout属性。改变了解释。这对于开始编写脚本可能有用，但我仍然不同意这一点。您不会让JS隐藏该div，您可以在加载CSS和JS时进行内联操作，这样用户就看不到它了。@popla面-您可以将内联样式设置为

display:none

，如果这是一个真正的问题的话。但是如果你的css在加载之前就加载了，而他们仍然看到一个未设置样式的主体，然后还有其他问题需要解决，使用内联样式和脚本是一种逃避。我不知道是否给出了与我写作时相同的/任何答案，我切换了选项卡来做其他重要的工作。我编辑了帖子，现在它也在页面加载后工作。哦，我为没有删除

显示：无
来自div1的属性。我现在编辑它。它在这里工作。Hover（）绑定mouseover（）和mouseleave（）的处理程序。如果一个hover（）可以完成所需的任务，那么我想使用它是有意义的。