将鼠标悬停在 CSS 中时如何显示隐藏内容不起作用

Question

我做错了什么？我来自我的代码：

#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 悬停时它应该制作内容中间左右可见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");
    });
});

将鼠标悬停在 CSS 中时如何显示隐藏内容不起作用

How to show hidden content when hover in CSS not working

html

css

jquery

show-hide