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");
    });
});

如何在CSS中悬停时无法显示隐藏的内容

1 个答案: