Javascript 活动和悬停时的自定义滑块具有相同的属性

我在自定义滑块在这里我写了一个循环，它是工作良好的活动幻灯片和活动点分页。在hover上，我为活动幻灯片编写了一些CSS，它位于所有幻灯片的顶部。问题是示例

$（“#dt2”）.hover（）{}

此悬停函数如何与活动幻灯片合并此悬停属性我希望在活动和悬停两种情况下使用此CSS使用jquery。 有人能给我建议如何实现这个输出吗。 将鼠标悬停在点分页上，您可以看到活动幻灯片位于所有其他幻灯片的顶部。因此，我正试图在活动幻灯片上使用相同的属性

$（文档）.ready（函数（）{
美元（“.pdot”）。在({
mouseover:function（）{
myvar=this.id；
$（'#sl'+myvar）.addClass（'fullVisible'）.sides（）.removeClass（'fullVisible'）；
},
mouseout:function（）{
$（.img.image1”）.addClass（'fullVisible'）.sides（）.removeClass（'fullVisible'）；
}
});
$（函数（）{
变量$slideLoop=$（'.slide'）；
变量$dotLoop=$（'.pdot'）；
var超时；
var指数=0；
函数_循环（idx）{
$slideLoop.removeClass（'active'）.eq（idx）.addClass（'active'）；
$dotLoop.removeClass（'active'）.eq（idx）.addClass（'active'）；
timeOut=setTimeout（函数（）{
索引=（idx+1）%$slideLoop.length；
索引=（idx+1）%$dotLoop.length；
_循环（索引）；
}, 3000);
};
_循环（索引）；
$（“.pagination dots，.inner”）.hover（函数（）{
clearTimeout（超时）；
}，函数（）{
_循环（索引）；
});
$（“.slide.pdot”）.hover（函数（）{
$（.slide.pdot”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
}，函数（）{
$（.slide.pdot”）.removeClass（“活动”）；
});
});
//在点上悬停（这将适用于悬停和活动幻灯片）
$（“#dt2”）。悬停(
函数（）{
$（“#sldt1”）.css({
“顶部”：“-200px”
});
},
函数（）{
$（“#sldt1”）.css({
“顶部”：“-100px”
});
}
);
$（“#dt3”）。悬停(
函数（）{
$（“#sldt1”）.css({
“顶部”：“-200px”
});
$（“#sldt2”）.css({
“顶部”：“-150px”
});
},
函数（）{
$（“#sldt1”）.css({
“顶部”：“-100px”
});
$（“#sldt2”）.css({
“顶部”：“-60px”
});
}
);
$（“#dt4”）。悬停(
函数（）{
$（“#sldt1”）.css({
“顶部”：“-200px”
});
$（“#sldt2”）.css({
“顶部”：“-155px”
});
$（“#sldt3”）.css({
“顶部”：“-125px”
});
},
函数（）{
$（“#sldt1”）.css({
“顶部”：“-100px”
});
$（“#sldt2”）.css({
“顶部”：“-60px”
});
$（“#sldt3”）.css({
“顶部”：“-30px”
});
}
);
});
.wrapper{
宽度：500px；
高度：500px；
利润率：150px自动；
位置：相对位置；
}
.内部{
位置：相对位置；
宽度：500px；
高度：500px；
利润率：150px自动；
z指数：0；
}
.图1，
.图2，
.3，
.image4{
宽度：490px；
高度：490px；
不透明度：0.1；
宽度：461px；
高度：378px；
位置：绝对位置；
过渡：所有0.6s三次贝塞尔（0.39,0.575,0.565,1）；
}
.image1{
顶部：-100px；
左：0px；
z指数：4；
}
.image2{
顶部：-60px；
左：0px；
z指数：3；
}
.image3{
顶部：-30px；
左：10px；
z指数：2；
}
.image4{
排名：0；
左：11px；
z指数：1；
}
.fullVisible{
不透明度：1；
过渡：所有0.35秒的缓进缓出；
}
.分页点{
宽度：150px；
高度：100px；
显示器：flex；
位置：绝对位置；
右图：-150px；
排名：0；
证明内容：之间的空间；
}
pdot先生{
宽度：20px；
高度：20px；
背景：红色；
边界半径：50px；
}
.pdot.active{
宽度：40px；
}
.slide.active{
背景色：红色；
宽度：100%；
高度：自动；
}
在代码中，您将类fullVisible与active混淆。因此，将代码段更改为：


var-caroussel；
$（文档）.ready（函数（）{
美元（“.pdot”）。在({
mouseover:function（）{
myvar=this.id；
//log（`myvar=${myvar}\n`）；
清除超时（caroussel）；
console.log（caroussel+“已停止”）；
$（'#sl'+myvar）.addClass（'fullVisible'）.sides（）.removeClass（'fullVisible'）；
$（'#'+myvar）.addClass（'active'）.sides（）.removeClass（'active'）；
//log（`${myvar}处于活动状态。`）；
//log（`sl${myvar}完全可见。`）；
},
mouseout:function（）{
$（“#sldt1”）.addClass（'fullVisible'）.sides（）.removeClass（'fullVisible'）；
$（'#dt1'）.addClass（'active'）.sides（）.removeClass（'active'）；
_环（0）；
}
});
//startoop（）；
_环（0）；
});
函数_循环（idx）{
设slideLoop=$（'.slide'）；
设dotLoop=$（'.pdot'）；
slideLoop.removeClass（'fullVisible'）.eq（idx）.addClass（'fullVisible'）；
dotLoop.removeClass（'active'）.eq（idx）.addClass（'active'）；
caroussel=setTimeout（函数（）{
索引=（idx+1）%slideLoop.length；
索引=（idx+1）%dotLoop.length；
_循环（索引）；
}, 3000);
日志（caroussel+“已安排”）；
};
#包装器{
宽度：500px；
高度：500px；
利润率：150px自动；
位置：相对位置；
}
#内在的{
位置：相对位置；
宽度：500px；
高度：500px；
利润率：150px自动；
z指数：0；
}
.幻灯片{
宽度：490px；
高度：490px；
不透明度：0；
/*宽度：461px*/
/*高度：378px*/
位置：绝对位置；
过渡：所有0.6s三次贝塞尔（0.39,0.575,0.565,1）；
}
#sldt1{
顶部：-100px；
左：0px；
z指数：4；
}
#sldt2{
顶部：-100px；
左：0px；
z指数：3；
}
#sldt3{
顶部：-100px；
左：0px；
z指数：2；
}
#sldt4{
顶部：-100px；
左：0px；
z指数：1；
}
.fullVisible{
不透明度：1；
过渡：所有0.01秒缓解；
}
#分页点{
宽度：150px；
高度：100px；
显示器：flex；
位置：绝对位置；
右图：-150px；
排名：0；
证明内容：之间的空间；
}
pdot先生{
宽度