javascript - 在 3 个图像面板部分内悬停时展开和更改图像

问题描述

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

我已经设法达到该部分扩展并且图像发生变化的地步，但是，一旦说第 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 主页末尾附近的图片部分的启发。

标签： javascriptjqueryhtmlcss

javascript - 在 3 个图像面板部分内悬停时展开和更改图像

问题描述

解决方案

推荐阅读