hover触发projectTitle时外层project div不展开、箭头位移问题求解

1. 父级project div无法同步展开的问题 #

问题原因 #

你JS代码中使用$(this).find(".project")查找父容器是错误的：find()方法只会查询当前节点的后代子元素，而.project是.projectTitle的上层父元素，永远无法被find()匹配到，自然无法添加open触发展开。
同时你CSS中写的.projectTitle:hover>.project规则完全无效，CSS目前没有父元素选择器，这段代码可以直接删除。

修复方案 #

将JS代码里的查找方法替换为向上查找父元素的closest()：

$(document).ready(function() {
  $(".projectTitle").hover(
    //on mouseover
    function() {
      $(this).find(".handoverExpanded").toggleClass('open');
      $(this).closest(".project").toggleClass('open'); // 修改这一行
    });
});

同时补充修改.handoverExpanded的CSS规则，解决过渡动画失效的问题：

.handoverExpanded {
  position: inherit;
  background-color: blue;
  width: 220px;
  left: 20px;
  /* 删除display: none，替换为overflow:hidden保证高度过渡生效 */
  overflow: hidden;
}
/* 删除下面两段无效CSS */
/* .projectTitle:hover>.handoverExpanded {display: block;} */
/* .projectTitle:hover>.project {height: 400px;} */

2. 箭头位置随内容展开移位的问题 #

问题原因 #

箭头.arrow1的绝对定位参考节点是父级.projectTitle（因为.projectTitle继承了父元素的position: relative属性），你设置了bottom: 30px，当.projectTitle高度随内容展开变大时，它的底部位置同步下移，箭头自然会跟着向下移动。

修复方案（二选一即可） #

方案1：调整DOM结构

把箭头节点从.projectTitle内部移到.project节点下，让箭头的定位参考变为外层的.project容器，父容器高度变化时箭头相对于.project底部的位置始终固定：

<div class="project">
  <p style="text-decoration: underline">Project Delivery Model</p>
  <div class="projectTitle">
    <p>Project Handover</p>
    <div class="handoverExpanded">
      <p>HSSEQ</p>
    </div>
    <div class="handoverExpanded">
      <p>Project Management</p>
    </div>
    <!-- 把箭头从这里移走 -->
  </div>
  <!-- 移到这里 -->
  <span class="arrow1">&#8594;</span>
</div>

方案2：修改箭头定位规则

直接把箭头的定位从相对底部改为相对顶部，根据你原有布局的位置调整具体top值即可，不需要修改DOM结构：

.arrow1 {
  font-size: 80px;
  color: grey;
  position: absolute;
  /* 删除bottom: 30px，替换为合适的top值，这里示例数值可以根据实际布局调整 */
  top: 120px;
  left: 255px;
  display: block;
}

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