我有一个3个面板的图像部分（第1、2和3部分）-例如，将鼠标悬停在第1部分上时，我希望原始bg淡出，而新的bg淡入同时又增长到全长部分“重叠”其他部分。一旦该部分为全宽，我希望能够将鼠标悬停在第二部分上，并且无需先将鼠标实际移出该部分区域即可进行相同的过程。

我设法到达了该部分扩展并且图像转换的位置，但是，一旦说了第1部分扩展了-它占据了该部分的整个宽度，因此将鼠标悬停在第2部分上不会触发第2部分。相反，我必须移动鼠标使其不在该部分之外，然后重新进入第2部分以开始该动画。

很容易看到它，因此除了下面的代码外，还附加了一个jsfiddle。

https://jsfiddle.net/tr5km94w/1/

<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>

我当时遇到的问题是，因为您最初将鼠标悬停在哪个部分上都占用了容器的整个宽度，所以当第1部分展开时，尽管我将鼠标悬停在第2或第3部分上，但从技术上讲，它仍然是该部分1，因为它是全角。无论如何，当我将鼠标悬停在相应部分上时，可以触发其他动画吗？任何帮助将不胜感激。

谢谢

编辑：为弄清理想端的外观，我受到了首页结尾处basicagency.com上图像部分的启发。