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

如何使图像(箭头)变为 5px向右所以 margin-left: 15px;当父标签<a>一直徘徊在？如果没有 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>