jquery - 如何在 CSS 中悬停时显示隐藏内容不起作用

Question

我做错了什么？我来自https://stackoverflow.com/a/26319532/5132778我的代码:

#txtleft {
  width: 25%;
  float: left;
  margin-left: 7%;
}
#txtleft.content {
  display: none;
}
#txtmiddle {
  float: left;
  width: 35%;
}
#txtright {
  float: left;
  width: 25%;
  margin-right: 7%;
}
#txtright.content {
  display: none;
}

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
  $(document).ready(function() {
    $(".content1").on('hover', function() {
      $(".content").css("display", "block");
    });
  });
</script>
<div id="txtleft">
  LEFT SHOWN
  <div id="txtleft" class="content">
    LEFT hidden</div>
</div>
<div id="txtmiddle">
  <div id="txtmiddle" class="content1">
    MIDDLE CONTENT</div>
</div>
<div id="txtright">
  <div id="txtright" class="content">
    right hidden</div>
</div>

我希望它能正常工作，但我的 firefox 没有做任何事情......我只希望一些代码在页面中居中，当中间的 div 悬停时，它应该使内容左右可见中间部分

Answer 1

您的代码似乎工作正常..

参见 fiddle ..

请更改您的<script>对于 jquery 如下:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>‌

要删除多余的白色间距，请将其添加到您的 CSS

html,body{
   margin:0;
   padding:0;
}​

更新

如果您正在尝试实现，例如:在悬停时显示 div，然后在悬停时隐藏它，那么您可以使用 jquery mouseover 来实现。和 mouseout功能。

参见 fiddle为此。

而且，修改后的脚本就像，

$(document).ready(function () {
    $(".content1").mouseover(function() {
        // show the element 
        $(".content").css("display", "block");
    });
    $(".content1").mouseout(function(){
        // show the element 
        $(".content").css("display", "none");
    });
});