css移动图片：悬停

Question

我想让这个网站徽标向侧面滑动到用户悬停的按钮。所以，当我徘徊联系＆＃34;面具＆＃34;滑过那个按钮。

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

图片包含课程.logo和身份#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;
}

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

以下是translateX的一些documentation。

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

另请注意，您的~选择器可能没有必要，您也可以使用类似#Btn1:hover #logoID {}

的内容

注意：如果您的徽标与按钮的徽标不同，则可能需要使用其他选择器：

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

祝你好运，没有标记我就能帮助你。

Answer 2

如果你想要流畅的动画，我建议你不要使用top。您可能希望使用css转换来实现这一点，因为它在桌面和移动设备上都是硬件加速（非常流畅）。特别是移动。

＆＃13;

＆＃13;

$(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)');
  
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;