Javascript 如何在旋转木马上产生这种悬停效果？

基本上，我已经做了一个三维旋转木马，其中有3个图像。当用户单击“下一步”和“上一步”按钮时，转盘将前后移动。我在顶部还有一个单独的图像，可以产生这种悬停效果。我想在旋转木马中的图像中加入悬停效果，使用相同的动画、不透明度、文本、大小等。但是，我不知道如何将其包括在内。我该怎么做？任何帮助都将不胜感激。这是我的密码。谢谢

var carousel=$（“.carousel”），
currdeg=0；
$（“.next”）。在（“单击”{d:“n”}上，旋转）；
$（“.prev”）。在（“单击”{d:“p”}上，旋转）；
函数旋转（e）{
如果（e.data.d==“n”）{
currdeg=currdeg-120；
}
如果（e.data.d==“p”）{
currdeg=currdeg+120；
}
carousel.css({
“-webkit变换”：“rotateY（“+currdeg+”deg）”，
“-moz变换”：“rotateY（“+currdeg+”deg）”，
“-o变换”：“旋转（“+currdeg+”deg）”，
“变换”：“旋转（“+currdeg+”度）”
});
}

.container{
保证金：0自动；
宽度：250px；
高度：200px；
位置：相对位置；
顶部：500px；
透视图：1000px；
}
旋转木马{
身高：100%；
宽度：100%；
位置：绝对位置；
变换样式：保留-3d；
转变：转变1s；
}
.项目{
显示：块；
位置：绝对位置；
背景：#000；
宽度：250px；
高度：200px；
线高：200px；
字号：5em；
文本对齐：居中；
颜色：#FFF；
不透明度：0.95；
}
.a{
变换：旋转（0度）平移（250像素）；
}
.b{
变换：旋转（120度）平移（250像素）；
}
c{
变换：旋转（240度）平移（250像素）；
}
.next，.prev{
颜色：#444；
位置：绝对位置；
顶部：500px；
填料：1米2米；
光标：指针；
背景：#CCC；
边界半径：5px；
边框顶部：1px实心#FFF；
盒影：0 5px 0#999；
过渡：框阴影0.1s，顶部0.1s；
}
.next:hover.prev:hover{color:#000；}
.next:活动，.prev:活动{
顶部：504px；
盒影：0 1px 0#999；
}
.next{右：5em；}
.prev{左：5em；}
.内容{
位置：相对位置；
宽度：100%；
左边距：自动；
右边距：自动；
最大宽度：400px；
}
.容器.名称{
颜色：#1A1A；
文本对齐：居中；
边缘底部：10px；
}
.content.content覆盖{
背景：rgba（0,0,0,0.7）；
位置：绝对位置；
身高：99%；
宽度：100%；
不透明度：0；
-webkit过渡：所有0.4s都易于输入输出0；
-moz转换：所有0.4都可以轻松地输入输出0；
过渡：所有0.4s均为0进0出；
}
.content：悬停。内容覆盖{
不透明度：1；
}
.内容图像{
宽度：100%；
}
.内容详情{
位置：绝对位置；
文本对齐：居中；
左：1米；
右侧填充：1em；
宽度：100%；
最高：50%；
左：50%；
不透明度：0；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
-webkit转换：所有0.3都易于输入输出0；
-moz转换：所有0.3秒都可从0秒变为0秒；
过渡：所有0.3秒均为0秒；
}
.content:悬停。内容详细信息{
最高：50%；
左：50%；
不透明度：1；
}
.内容详情h3{
颜色：#fff；
字号：500；
字母间距：0.15em；
边缘底部：0.5em；
文本转换：大写；
}
.内容详情{
颜色：#fff；
字号：0.8em；
}
法登先生{
最高：80%；
}
.内容{
位置：相对位置；
宽度：100%；
左边距：自动；
右边距：自动；
最大宽度：400px；
}
.content.content覆盖{
背景：rgba（0,0,0,0.7）；
位置：绝对位置；
身高：99%；
宽度：100%；
不透明度：0；
-webkit过渡：所有0.4s都易于输入输出0；
-moz转换：所有0.4都可以轻松地输入输出0；
过渡：所有0.4s均为0进0出；
}
.content：悬停。内容覆盖{
不透明度：1；
}
.内容图像{
宽度：100%；
}
.内容详情{
位置：绝对位置；
文本对齐：居中；
左：1米；
右侧填充：1em；
宽度：100%；
最高：50%；
左：50%；
不透明度：0；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
转换：翻译（-50%，-50%）；
-webkit转换：所有0.3都易于输入输出0；
-moz转换：所有0.3秒都可从0秒变为0秒；
过渡：所有0.3秒均为0秒；
}
.content:悬停。内容详细信息{
最高：50%；
左：50%；
不透明度：1；
}
.内容详情h3{
颜色：#fff；
字号：500；
字母间距：0.15em；
边缘底部：0.5em；
文本转换：大写；
}
.内容详情{
颜色：#fff；
字号：0.8em；
}
法登先生{
最高：80%；
}

文件
下一个
上

对于解决方案，我必须对css、html进行一些更改，并修复js代码以确定活动幻灯片

这样的结果有必要吗

var carousel=$（“.carousel”），
currdeg=0，
电流=0；
$（“.next”）。在（“单击”{d:“n”}上，旋转）；
$（“.prev”）。在（“单击”{d:“p”}上，旋转）；
函数旋转（e）{
$（carousel.find（'.active'））.removeClass（'active'）；
如果（e.data.d==“n”）{
currdeg=currdeg-120；
当前=（当前+1）%carousel.find（'.item'）.length；
}
如果（e.data.d==“p”）{
currdeg=currdeg+120；
当前=（当前-1+carousel.find（'.item'）.length）%carousel.find（'.item'）.length；
}
$（carousel.find（'.item'）[current]）.addClass（'active'）；
carousel.css({
“-webkit变换”：“rotateY（“+currdeg+”deg）”，
“-moz变换”：“rotateY（“+currdeg+”deg）”，
“-o变换”：“旋转（“+currdeg+”deg）”，
“变换”：“旋转（“+currdeg+”度）”
}); 
}

.container{
保证金：-100px自动；
宽度：250px；
高度：200px；
位置：相对位置；
顶部：500px；
透视图：1000px；
}
旋转木马{
身高：100%；
宽度：100%；
位置：绝对位置；
变换样式：保留-3d；
转变：转变1s；
}
.项目{
显示：块；
位置：绝对位置；
背景：#000；
宽度：250px；
高度：200px；
线高：200px；
字号：5em；
文本对齐：居中；
颜色：#FFF；
/*不透明度：0.95*/
}
.item.active{