Javascript 悬停时的菜单驱动效果

我正在创建一种效果，当你将鼠标悬停在

.hoverarea

类上时，

.sociallink1

，

.sociallink2

等将像drover效果一样切换，但我的代码不起作用

另外，每个

都有额外的利润。当我只添加了
2px

下面是我的代码


*{
保证金：0；
填充：0；
}
.Sociallink 1{
背景色：蓝紫色；
光标：指针；
宽度：200px；
高度：50px；
颜色：白色；
文本对齐：居中；
字体大小：40px；
}
.Sociallink 2{
背景色：蓝紫色；
光标：指针；
宽度：200px；
高度：50px；
颜色：白色；
文本对齐：居中；
字体大小：40px；
保证金：2px0；
}
.社交链接3{
背景色：蓝紫色；
光标：指针；
宽度：200px；
高度：50px；
颜色：白色；
文本对齐：居中；
字体大小：40px；
保证金：2px0；
}
.社交链接4{
背景色：蓝紫色；
光标：指针；
宽度：200px；
高度：50px；
颜色：白色；
文本对齐：居中；
字体大小：40px；
保证金：2px0；
}
.社交链接5{
背景色：蓝紫色；
光标：指针；
宽度：200px；
高度：50px；
颜色：白色；
文本对齐：居中；
字体大小：40px；
保证金：2px0；
}
.集装箱{
利润率：100px0；
}
.悬停区{
背景色：黑色；
宽度：50px；
高度：50px；
位置：相对位置；
左：200px；
顶部：-50px；
颜色：白色；
字体大小：40px；
文本对齐：居中；
光标：指针；
}
.link1{
//位置：相对位置；
左：-200px；
}
.link2{
位置：相对位置；
左：-200px；
}
.link3{
位置：相对位置；
左：-200px；
}
.link4{
位置：相对位置；
左：-200px；
}
.link5{
位置：相对位置；
左：-200px；
}
.hover区域：hover.link1{
//位置：相对位置；
左：0；
过渡：1s；
}

脸谱网
F
谷歌+
G+
一款图片分享应用
我
品特烈
P
啁啾
T
您缺少要转换的“属性”，在您的情况下，
左侧


我还对你的代码做了一些修改，使它更紧凑

当使用类时，尽量优化它，这样你就不会有5个不同的类，而只有一个（或两个）


*{
保证金：0；
填充：0；
}
.集装箱{
利润率：100px0；
}
.链接{
背景色：蓝紫色；
光标：指针；
宽度：250px；
高度：50px；
左：-200px；
颜色：白色；
文本对齐：居中；
字体大小：40px；
右边填充：50px；
位置：相对位置；
框大小：边框框；
边缘底部：.5em；
}
.link>div{
背景色：黑色；
宽度：50px；
高度：50px；
位置：绝对位置；
右：0；
排名：0；
}
.link:悬停{
左：0；
过渡：左1秒；
}

脸谱网
F
谷歌+
G+
一款图片分享应用
我
品特烈
P
啁啾
T
您想要实现的目标到底是什么？