当元素 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> 悬停在上面时，如何使图像（箭头）5px 向右移动 margin-left: 15px;？如果没有 javascript 或 jquery 这可能吗？

Answer 1

像这样？

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 2

试试这个。

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>

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

当元素 Y 悬停时移动元素 X？

Move element X when element Y is hovered on?

html

css

position

css-position

hover