-1

为什么在块/无之间切换显示但 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>
4

3 回答 3

0

我建议使用 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>
于 2013-01-05T04:39:14.093 回答
0

它们似乎都工作相同：

https://tinker.io/62ecc/1

如果您在本地文件上进行测试，浏览器可能会默认file使用src. 使用开发人员工具确认脚本的响应代码。

于 2013-01-05T04:40:34.243 回答
0

如果父 div 是您代码中的第一个 div，那么您可以使用$('div:first')或可以将 id 提供给父级，例如 ..

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

使用hover()并使toggle()您的代码简洁，这相当于您需要的事件。

于 2013-01-05T05:02:19.950 回答