Javascript 在3图像面板区域内展开并更改悬停时的图像

我有一个3面板图像部分（第1、2和3节）-例如，在将鼠标悬停在第1节上时，我希望原始背景淡出，而新背景淡入，同时增长到与其他部分“重叠”的部分的全长。一旦这一部分是全宽的，我想能够悬停在第二部分和相同的过程发生，而不必实际移动鼠标出部分区域第一

我已经设法到达了一个点，在这个点上，部分展开，图像改变，但是，一旦说部分1展开，它就占据了部分的全部宽度，所以悬停在部分2上不会触发部分2的悬停动画。取而代之的是，我必须移动鼠标，使其位于该部分之外，然后重新进入第2部分以开始该动画

除了下面的代码之外，附加的jsfiddle可能更容易看到

部分


第01节标题


部分


第02节标题
部分


第03节标题
.面板容器{
宽度：100%；
高度：75vh；
显示器：flex；
}
.第一小组{
柔性生长：1；
高度：75vh；
位置：相对位置；
指针事件：无；
}
.第二小组{
柔性生长：1；
高度：75vh；
位置：相对位置；
指针事件：无；
左：6px；
}
.第三小组{
柔性生长：1；
高度：75vh；
位置：相对位置；
指针事件：无；
}
.小组案文一{
柔性生长：1；
高度：75vh；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
填充：3rem；
指针事件：无；
}
.小组案文二{
柔性生长：1；
高度：75vh；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
填充：3rem；
指针事件：无；
}
.小组案文三{
柔性生长：1；
高度：75vh；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
填充：3rem；
指针事件：无；
}
.面板文本一h3{
字体系列：“Arial”，无衬线；
字体大小：1.5rem；
颜色：白色；
}
.面板文本1 h1{
字体系列：“Arial”，无衬线；
字号：2rem；
颜色：白色；
}
.面板文本一个跨度{
颜色：白色；
}
.面板文本二h3{
字体系列：“Arial”，无衬线；
字体大小：1.5rem；
颜色：白色；
}
.面板文本二h1{
字体系列：“Arial”，无衬线；
字号：2rem；
颜色：白色；
}
.面板文本两跨{
颜色：白色；
}
.面板文本三h3{
字体系列：“Arial”，无衬线；
字体大小：1.5rem；
颜色：白色；
}
.面板文本三h1{
字体系列：“Arial”，无衬线；
字号：2rem；
颜色：白色；
}
.面板文本三跨{
颜色：白色；
}
.小组测试背景{
宽度：100%；
高度：75vh；
位置：绝对位置；
显示器：flex；
}
.面板测试一{
柔性生长：1；
高度：75vh；
背景：红色；
宽度：0%；
过渡：宽度0.5s；
}
.面板测试一：悬停{
宽度：100%；
过渡：宽度0.5s；
背景：蓝色；
}
.小组测试二{
柔性生长：1；
高度：75vh；
背景：绿色；
宽度：0%；
过渡：宽度0.5s；
}
.面板测试二：悬停{
宽度：100%；
过渡：宽度0.5s；
背景：黄色；
}
.小组测试三{
柔性生长：1；
高度：75vh；
背景：紫色；
宽度：0%；
过渡：宽度0.5s；
}
.面板测试三：悬停{
宽度：100%；
过渡：宽度0.5s；
背景：粉红色；
}

我想我现在遇到的问题是，因为无论你最初悬停在哪个部分上，都会占据容器的全宽，所以当第1部分展开时，虽然我悬停在第2或第3部分上，但从技术上讲，它仍然是第1部分，因为它是全宽的。是否有这样的方法，当我将鼠标悬停在各个部分上时，可以触发其他动画？非常感谢您的帮助

多谢各位

---

编辑：为了澄清理想的结尾应该是什么样子，我从主页末尾附近的basicagency.com上的图片部分得到了灵感。

我注意到的一点是，在开始下一部分之前，首字母似乎只有3个，应该有4个。这可能有助于尝试。

我注意到的一点是，在下一节开始之前，首字母似乎只有3个，应该有4个。这可能有助于尝试。

谢谢您的建议，您是否可以再详细说明一下？我不知道我是否明白你的意思。谢谢你的建议，你还有什么可以详细说明的吗？我不确定我是否明白你的意思。

<div class="panel-test-background">
  <div class="panel-test-one"></div>
  <div class="panel-test-two"></div>
  <div class="panel-test-three"></div>
</div>

<div class="panel-container">
  <div class="panel-one">
    <div class="panel-text-one">
      <div class="text-top">
          <h3>section</h3>
          <br />
          <h1>Section Title No.01</h1>
          <br />
      </div>
    </div>
  </div>
  <div class="panel-two">
    <div class="panel-text-two">
        <div class="text-top">
            <h3>section</h3>
            <br />
            <h1>Section Title No.02</h1>
        </div>
    </div>
  </div>
  <div class="panel-three">
    <div class="panel-text-three">
        <div class="text-top">
            <h3>section</h3>
            <br />
            <h1>Section Title No.03</h1>
        </div>
    </div>
  </div>
 </div>

<style>
.panel-container {
    width: 100%;
    height: 75vh;
    display: flex;
}

.panel-one {
    flex-grow: 1;
    height: 75vh;
    position: relative;
    pointer-events: none;
}

.panel-two {
    flex-grow: 1;
    height: 75vh;
    position: relative;
    pointer-events: none;
    left: 6px;
 }

.panel-three {
    flex-grow: 1;
    height: 75vh;
    position: relative;
    pointer-events: none;
}

.panel-text-one {
    flex-grow: 1;
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    pointer-events: none;
}


.panel-text-two {
    flex-grow: 1;
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    pointer-events: none;
 }

.panel-text-three {
    flex-grow: 1;
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    pointer-events: none;
}

.panel-text-one h3 {
    font-family: "Arial", sans-serif;
    font-size: 1.5rem;
    color: white;
}

.panel-text-one h1 {
    font-family: "Arial", sans-serif;
    font-size: 2rem;
    color: white;
}

.panel-text-one span {
    color: white;
}

.panel-text-two h3 {
    font-family: "Arial", sans-serif;
    font-size: 1.5rem;
    color: white;
}

.panel-text-two h1 {
    font-family: "Arial", sans-serif;
    font-size: 2rem;
    color: white;
}

.panel-text-two span {
    color: white;
}

.panel-text-three h3 {
    font-family: "Arial", sans-serif;
    font-size: 1.5rem;
    color: white;
}

.panel-text-three h1 {
    font-family: "Arial", sans-serif;
    font-size: 2rem;
    color: white;
}

.panel-text-three span {
    color: white;
}

.panel-test-background {
    width: 100%;
    height: 75vh;
    position: absolute;
    display: flex;
}

.panel-test-one {
    flex-grow: 1;
    height: 75vh;
    background: red;
    width: 0%;
    transition: width 0.5s;
}

.panel-test-one:hover {
    width: 100%;
    transition: width 0.5s;
    background: blue;
}

.panel-test-two {
    flex-grow: 1;
    height: 75vh;
    background: green;
    width: 0%;
    transition: width 0.5s;
}

.panel-test-two:hover {
    width: 100%;
    transition: width 0.5s;
    background: yellow;
}

.panel-test-three {
    flex-grow: 1;
    height: 75vh;
    background: purple;
    width: 0%;
    transition: width 0.5s;
}

.panel-test-three:hover {
    width: 100%;
    transition: width 0.5s;
    background: pink;
}
</style>