当元素 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>

当父标签<a> 悬停在上面时，如何使图像（箭头）向右移动margin-left: 15px;？没有javascript或jquery这可能吗？

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>

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>

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>