Javascript 在3图像面板区域内展开并更改悬停时的图像
我有一个3面板图像部分(第1、2和3节)-例如,在将鼠标悬停在第1节上时,我希望原始背景淡出,而新背景淡入,同时增长到与其他部分“重叠”的部分的全长。一旦这一部分是全宽的,我想能够悬停在第二部分和相同的过程发生,而不必实际移动鼠标出部分区域第一 我已经设法到达了一个点,在这个点上,部分展开,图像改变,但是,一旦说部分1展开,它就占据了部分的全部宽度,所以悬停在部分2上不会触发部分2的悬停动画。取而代之的是,我必须移动鼠标,使其位于该部分之外,然后重新进入第2部分以开始该动画 除了下面的代码之外,附加的jsfiddle可能更容易看到Javascript 在3图像面板区域内展开并更改悬停时的图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个3面板图像部分(第1、2和3节)-例如,在将鼠标悬停在第1节上时,我希望原始背景淡出,而新背景淡入,同时增长到与其他部分“重叠”的部分的全长。一旦这一部分是全宽的,我想能够悬停在第二部分和相同的过程发生,而不必实际移动鼠标出部分区域第一 我已经设法到达了一个点,在这个点上,部分展开,图像改变,但是,一旦说部分1展开,它就占据了部分的全部宽度,所以悬停在部分2上不会触发部分2的悬停动画。取而代之的是,我必须移动鼠标,使其位于该部分之外,然后重新进入第2部分以开始该动画 除了下面的代码之外,
部分
第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>