css 在 :hover 上移动图像答案

【问题标题】：css move image on :hovercss 在 :hover 上移动图像
【发布时间】：2023-03-23 05:25:01
【问题描述】：

我想让这个网站徽标向用户悬停的按钮侧滑。所以当我悬停联系时，“面具”会滑到那个按钮上。

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

图像具有类.logo 和id #logoID 这些按钮的 ID 为 #Btn1、#Btn2、#Btn3、#Btn4、#Btn5。按钮有类.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;
}

【问题讨论】：

请添加您的标记，谢谢！
您好，感谢您的回答。恐怕我什至不确定这意味着什么：/
请提供您的 HTML。简短解释一下你为什么要做你正在做的事情也会很有用。我们或许能够为更“正常”的解决方案提供指导。没有悬停按钮时，图像是否返回到第三个按钮？
position 属性不采用数值，它采用static、absolute、relative 或fixed。见developer.mozilla.org/en-US/docs/Web/CSS/position
所以你想要他们悬停的菜单项上方的护目镜？

标签： html css

【解决方案1】：

这是一个使用transform: translateX ();的建议

#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);
}

这是documentation 的一些translateX。

当然，您必须将值固定为适合您的值。甚至使用百分比值可能更适合您的响应式布局。

还请记住，您的~ 选择器可能不是必需的，您不妨使用#Btn1:hover #logoID {} 之类的东西来逃避

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

如果徽标直接位于容器内，请使用 #Btn1:hover > #logoID。
如果徽标直接位于容器之后（在其结束标记旁边），请使用 #Btn1:hover + #logoID。
如果徽标位于容器内的其他任何位置，请使用 #Btn1:hover #logoID。

祝你好运，没有标记我能帮上的忙。

【讨论】：

OP 的原始选择器不起作用，#logoID 和 .logo 在同一个元素上。您担心波浪号 ~ 选择器是对的。
哦，那我会编辑我的答案。感谢您的提醒。
见鬼，我们甚至不知道“按钮”是否是图像的兄弟姐妹。 OP 表示他们正在使用 WordPress。如果这是一个 WP 菜单，那么我想我们会在黑暗中跌跌撞撞，直到我们看到实际的标记。即使没有 ~ 并且如果 id/class 组合是固定的，它也可能无法正常工作，哈哈。
是的，你是对的。我编辑了我的答案以包括所有可能的（和可解决的）案例。
网站链接我 www.temp.motionair.no 如果它有助于查看它。如果太麻烦，有人知道如何从 wordpress 获取 HTML 标记吗？

【解决方案2】：

如果你想要流畅的动画，我建议你不要使用 top。您可能希望通过 css 转换来执行此操作，以便在桌面和移动设备上进行硬件加速（非常流畅）。尤其是移动设备。

$(document).ready(function()
{
   $('.txt').bind('mousedown touchdown', function()
     {
     $('.txt').css('transform','scale(1)');
     
         goToMenu($(this));
     });
});

function goToMenu(menu)
{
     var menuOffset = menu.offset();
     var x = menuOffset.left;
  
     $(menu).css('transform','scale(1.4)');
     $('.imgContainer').css('transform','translateX(' + x + 'px)');
  
}

.txt {
  float:left;
  font-size:20px;
  margin-top:60px;
  margin-left:30px;
  cursor:pointer;
    transition:all 0.5s;
  user-select: none;
   -webkit-user-select: none;
}

.imgContainer {
  transform: translateX(30px);
  transition:all 0.5s;
  position:absolute;
  background-image: url('https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/car.png'); 
  background-repeat: no-repeat;
   background-position: center;
    background-size: 50px 50px;
  width:50px;
  height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='imgContainer'>

  </div>

<div class='txt' id='menu1'>
  Menu1
  </div>
<div class='txt' id='menu2'>
  Menu2
  </div>
<div class='txt' id='menu3'>
  Menu3
  </div>
<div class='txt' id='menu4'>
  Menu4
  </div>
<div class='txt' id='menu5'>
  Menu5
  </div>

【讨论】：