Javascript 带有图像动画的按钮悬停

在我的示例中，只有第一个按钮提供悬停动画

$（文档）.ready（函数（）{
$（'.show\u hide\u button.aube'）。每个（函数（i，值）{
$（this）.hover（函数（）{
$（'some#u box'）。设置动画（{width:'toggle'}）；
});
});
});
#一些盒子{
溢出：隐藏；
宽度：25%；
高度：400px；
}



要素


元素


elementu

您只需将事件处理程序附加到所需的元素类，然后在事件处理程序中使用
this
来获取与当前元素相关的元素，当前元素是事件目标。大概是这样的：


$（文档）.ready（函数（）{
$（'.show\u hide\u button.aube'）。悬停（函数（）{
$（this.next（“#some_box”）.animate（{width:'toggle'}）；
});
});
#一些盒子{
溢出：隐藏；
宽度：25%；
高度：400px；
}



要素


元素


elementu

当您将鼠标悬停在一个
li
上时，您所做的是显示每个
某个框。你需要以某种方式将当前悬停的li与其图像链接起来。兄弟姐妹或具有类似于数据属性的属性

我试图复制你发布的网站。请参阅下面的代码片段。在代码中还添加了一些解释。如果你想了解更多信息，请告诉我


//获取悬停按钮（li）
var按钮=$（“.show\u hide\u按钮”）
$（按钮）。悬停（函数（）{
//删除以前悬停的li上添加的类（如果有）
$（“li”）.removeClass（“hoverMe”）
//在当前悬停的li上添加类以实现样式目的
$（this.addClass（“hoverMe”）
//将悬停的li链接到其包含div的图像
var target=$（this.attr（“数据目标”）
//删除以前链接的包含图像的div上添加的类（如果有）
$（“.right\u container>div”）.removeClass（“活动”）
//使用悬停的li将类添加到当前链接的div
$（目标）.addClass（“活动”）
})
/*布局*/
保险商实验室{
浮动：左；
宽度：50%；
保证金：0；
填充：0；
}
.右(右)货柜{
浮动：左；
宽度：50%；
位置：相对位置；
}
.right_容器>div{
位置：绝对位置；
排名：0；
左：0；
}
.右(集装箱img){
最大宽度：100%；
不透明度：0；
过渡：0.3s；
}
/*默认颜色和背景色*/
李，谢谢{
背景：红色；
}
.right_container>div:之前{
背景：红色；
内容：“；
位置：绝对位置；
左：0；
排名：0；
宽度：0%；
身高：100%；
过渡：2s；
}
/*自定义颜色和背景*/
.right\u container>div:n子级（2）：之前，
李：第N个孩子（2n）。我{
背景：黄色；
}
.right\u container>div:n子级（3）：之前，
李：第N个孩子（第3个）。让我停下来{
背景：绿色；
}
/*鼠标悬停在li上时图像和伪元素（：before）的动画*/
.right_container>div.active:之前{
动画名称：widthAnim；
动画延迟：0s；
动画持续时间：1s；
动画填充模式：向后；
动画计时功能：放松；
z指数：100；
}
.右侧容器>分区活动img{
动画名称：justopac；
动画延迟：0.5s；
动画持续时间：0s；
动画填充模式：正向；
动画计时功能：放松；
}
/*动画*/
@关键帧宽度动画{
0% {
宽度：0；
}
50% {
宽度：100%；
}
100% {
宽度：0%；
}
}
@关键帧justopac{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}



要素1


元素2


元素3


我复制了您作为参考添加的网站。在下面检查我的答案