Html css移动图像：悬停

我想让这个网站的徽标滑到用户悬停的按钮旁边。所以，当我悬停接触时，“面具”滑向那个按钮

我有5个菜单按钮，中间按钮上有一个图像。我想移动图像，使其位于用户悬停的按钮上方

图像具有class

.logo

和id

#logoID

这些按钮的ID分别为

#Btn1

，

#Btn2

，

#Btn3

，

#Btn4

，

#Btn5

。 这些按钮有class

.BtnC1

，

.BtnC2

，

.BtnC3

，

.BtnC4

，

.BtnC5

我刚开始使用CSS，几乎不了解它。这就是我到目前为止所拥有的，我真的非常感谢任何帮助或指导。。。谢谢

#Btn1:hover ~ #logoID .logo {
    position: -100px
}


#Btn2:hover ~ #logoID .logo {
    position: -50px;
}


#Btn3:hover ~ #logoID .logo {
    position: 0px;
}

#Btn4:hover ~ #logoID .logo {
    position: 50px;
}


#Btn5:hover ~ #logoID .logo {
    position: 100px;
}

---

这里有一个建议，使用

transform:translateX（）

这里有一些关于translateX的信息

当然，您必须根据适合自己的情况确定值。也许即使使用百分比值也能更好地适应快速响应的布局

还请记住，您的
~
选择器可能不是必需的，您也可以使用类似
#Btn1:hover#logoID{}

注意：如果您的徽标与按钮位于不同的级别，则可能需要不同的选择器：


如果徽标直接位于容器内，请使用
#Btn1:hover>#logoID
如果徽标直接位于容器后面（靠近其关闭标签），请使用
#Btn1:hover+#logoID
如果徽标位于容器内的任何其他位置，请使用
#Btn1:hover#logoID

祝你好运，没有标记我也能帮上忙。
这里有一个使用
transform:translateX（）的建议

这里有一些关于translateX的信息

当然，您必须根据适合自己的情况确定值。也许即使使用百分比值也能更好地适应快速响应的布局

还请记住，您的
~
选择器可能不是必需的，您也可以使用类似
#Btn1:hover#logoID{}

注意：如果您的徽标与按钮位于不同的级别，则可能需要不同的选择器：


如果徽标直接位于容器内，请使用
#Btn1:hover>#logoID
如果徽标直接位于容器后面（靠近其关闭标签），请使用
#Btn1:hover+#logoID
如果徽标位于容器内的任何其他位置，请使用
#Btn1:hover#logoID

祝你好运，没有标记我也能帮上忙。
如果你想要平滑的动画，我建议你不要使用top。您可能希望通过css转换实现这一点，从而在桌面和移动设备上实现硬件加速（非常平滑）。尤其是手机


$（文档）.ready（函数（）
{
$（'.txt'）.bind（'鼠标向下触地'，函数（）
{
$（'.txt'）.css（'transform'，'scale（1）'）；
goToMenu（$（本））；
});
});
功能goToMenu（菜单）
{
var menuOffset=menu.offset（）；
var x=menuOffset.left；
$（菜单）.css（'transform'，'scale（1.4）'）；
$（'.imgContainer'）.css（'transform'，'translateX（'x+'px'））；
}
.txt{
浮动：左；
字体大小：20px；
边缘顶部：60像素；
左边距：30px；
光标：指针；
过渡：均为0.5s；
用户选择：无；
-webkit用户选择：无；
}
.imgContainer{
转换：translateX（30px）；
过渡：均为0.5s；
位置：绝对位置；
背景图像：url（'https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/car.png'); 
背景重复：无重复；
背景位置：中心；
背景尺寸：50px 50px；
宽度：50px；
高度：50px；
}

菜单1
菜单2
菜单3
菜单4
菜单5
如果您想要平滑动画，我建议您不要使用top。您可能希望通过css转换实现这一点，从而在桌面和移动设备上实现硬件加速（非常平滑）。尤其是手机


$（文档）.ready（函数（）
{
$（'.txt'）.bind（'鼠标向下触地'，函数（）
{
$（'.txt'）.css（'transform'，'scale（1）'）；
goToMenu（$（本））；
});
});
功能goToMenu（菜单）
{
var menuOffset=menu.offset（）；
var x=menuOffset.left；
$（菜单）.css（'transform'，'scale（1.4）'）；
$（'.imgContainer'）.css（'transform'，'translateX（'x+'px'））；
}
.txt{
浮动：左；
字体大小：20px；
边缘顶部：60像素；
左边距：30px；
光标：指针；
过渡：均为0.5s；
用户选择：无；
-webkit用户选择：无；
}
.imgContainer{
转换：translateX（30px）；
过渡：均为0.5s；
位置：绝对位置；
背景图像：url（'https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/car.png'); 
背景重复：无重复；
背景位置：中心；
背景尺寸：50px 50px；
宽度：50px；
高度：50px；
}

菜单1
菜单2
菜单3
菜单4
菜单5
请同时添加您的标记，谢谢！嗨，谢谢你的回答。恐怕我甚至不知道这意味着什么：/请提供您的HTML。简短地解释一下你为什么要做你正在做的事情也会很有用。我们或许能够为更“正常”的解决方案提供指导。当没有按钮悬停时，图像是否返回到第三个按钮？position属性不采用数字值，它采用
静态
、
绝对
、
相对
、或
固定
。看到了吗？你想把护目镜放在他们悬停的菜单项上方吗？请添加你的标记，谢谢！嗨，谢谢你的回答。恐怕我甚至不知道这意味着什么：/请提供您的HTML。简短地解释一下你为什么要做你正在做的事情也会很有用。我们或许能够为更“正常”的解决方案提供指导。即时通讯吗
#Btn1:hover #logoID {
    transform: translateX(-100px);
}


#Btn2:hover #logoID {
    transform: translateX(-50px);
}


#Btn3:hover #logoID {
    transform: translateX(0px);
}

#Btn4:hover #logoID {
    transform: translateX(50px);
}


#Btn5:hover #logoID {
    transform: translateX(100px);
}