当鼠标悬停在元素Y上时，移动元素X？

Question

a img {
  width:3%;
  text-decoration:none;
  margin-left:10px;
}

a {
    top: 10px;
    left: 10px;
    position: absolute;
    color: #090909;
}

<a href="#">View <img src="https://cdn1.iconfinder.com/data/icons/internet-28/48/31-512.png"> </a>

当鼠标悬停在父标签上时，如何使图像（箭头）向右移动5像素（即margin-left:15px;）？ 是否可以在不使用JavaScript或jQuery的情况下实现此操作？

- Zanic L3

Answer 1

请尝试这段代码

a img {
  width:3%;
  text-decoration:none;
  margin-left:10px;
  transition:0.5s;
}
a {
  top: 10px;
  left: 10px;
  position: absolute;
  color: #090909;
}
a:hover img{
   opacity: 1; 
 margin-left: 50px;  
 transition: all 0.5s ease-out; 
 -webkit-transform: rotate(177deg);   
 zoom: 1;
}

<a href="#">View <img src="https://cdn1.iconfinder.com/data/icons/internet-28/48/31-512.png"> </a>

- Wassim Al Ahmad

Answer 2

像这样吗？

a img {
  width:3%;
  text-decoration:none;
  margin-left:10px;
}

a:hover img {
  margin-left:15px;
}


a {
    top: 10px;
    left: 10px;
    position: absolute;
    color: #090909;
}

<a href="#">View <img src="https://cdn1.iconfinder.com/data/icons/internet-28/48/31-512.png"> </a>

- mplungjan

Answer 3

试试这个。

a img {
  width:3%;
  text-decoration:none;
  margin-left:10px;
  transition:0.5s;
}
a {
  top: 10px;
  left: 10px;
  position: absolute;
  color: #090909;
}
a:hover img{
  margin-left:15px;
}

<a href="#">View <img src="https://cdn1.iconfinder.com/data/icons/internet-28/48/31-512.png"> </a>

- ankita patel