jQuery实现div hover切换后无法触发un-hover恢复显示如何解决？

问题根因 #

你的判断是准确的：jQuery的hide()方法本质是给元素设置display: none属性，被设置该属性的元素不会响应任何鼠标交互事件，因此绑定在第一个div上的移出类事件在元素隐藏后无法触发。

修复方案 #

给第二个div补充绑定mouseleave事件，鼠标离开第二个div时切换回初始显示状态即可，修正后的代码如下：

JS代码 #

$(document).ready(function(){
  $("#seconddiv").hide();
  $("#firstdiv").mouseenter(function(){
    $("#seconddiv").show();
    $("#firstdiv").hide();
  });
  $("#seconddiv").mouseleave(function(){
    $("#firstdiv").show();
    $("#seconddiv").hide();
  });
});

CSS语法修正 #

你提供的CSS代码存在语法错误，padding-bottom: 25px末尾的冒号需要修改为分号，否则该样式不会生效：

.fullwidth {
  width: 100%;
  padding-top: 25px;
  padding-bottom: 25px;
}

可选优化方案 #

如果两个div切换时存在间隙，容易触发误判的话，可以给两个div套一个始终可见的父容器，把交互事件绑定在父容器上，稳定性更高：

<div class="toggle-wrapper">
  <div id="firstdiv" class="fullwidth">
    <p>First Text</p>
  </div>
  <div id="seconddiv" class="fullwidth">
    <p>Second Text</p>
  </div>
</div>

对应JS代码可以简化为：

$(document).ready(function(){
  $("#seconddiv").hide();
  $(".toggle-wrapper").hover(
    function () {
      $("#seconddiv").show();
      $("#firstdiv").hide();
    },
    function () {
      $("#firstdiv").show();
      $("#seconddiv").hide();
    }
  );
});

内容的提问来源于stack exchange，提问作者Beck