当父元素在 :悬停时使用 CSS 和 HTML 时，将边距添加到图标

Question

>我有一个带有一些文本的图标。当<a>元素上的任何地方悬停时，我想margin-left: 40px; svg。我怎么能只使用HTML CSS来做到这一点。基本上，标签悬停在任何地方 - 向子元素添加样式。

.HTML

<a href="#" class="text-link">
    <span class="text">Text Link</span><svg class="icon"><use xlink:href="img/icons/icon.svg#arrow" /></svg>
</a>

.CSS

.text-link {
    position: relative;
    text-decoration: none;
    padding: 5px 0;
}
.icon {
    margin-left: 20px;
    transition: margin-left .5s;
}
.icon:hover {
    margin-left: 40px;
}

当图标悬停在上面时，这会增加边距，但我想在标签上的任何地方悬停时添加边距。

提前谢谢你。

Answer 1

使用这个：

.parent:hover .child {
 /* CSS here */
}

在您的情况下：-

a:hover svg{
  margin-left:40px;
}

Answer 2

主要角色是使用 css 样式

.parent-tag:hover .child-tag{
   /* Your CSS */
}

但在您的情况下，解决方案是

a:hover svg{
   margin-left: 40px;
}

Answer 3

在.text-link:hover上编写悬停代码

堆栈代码段

.text-link {
  position: relative;
  text-decoration: none;
  padding: 5px 0;
  display: inline-block;
}
.icon {
  margin-left: 20px;
  transition: margin-left .5s;
}
.text-link:hover .icon {
  margin-left: 40px;
}
.text {
  vertical-align: super;
}

<a href="#" class="text-link">
  <span class="text">Text Link</span>
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px">
<path fill-rule="evenodd"  fill="rgb(0, 0, 0)"
 d="M11.998,24.000 C5.383,24.000 0.001,18.617 0.001,12.001 C0.001,5.384 5.383,0.000 11.998,0.000 C18.615,0.000 23.999,5.384 23.999,12.001 C23.999,18.617 18.615,24.000 11.998,24.000 ZM11.998,1.101 C5.990,1.101 1.102,5.991 1.102,12.001 C1.102,18.010 5.990,22.899 11.998,22.899 C18.008,22.899 22.898,18.010 22.898,12.001 C22.898,5.991 18.008,1.101 11.998,1.101 ZM7.146,19.854 L11.843,11.957 L7.146,4.306 L20.611,12.079 L7.146,19.854 Z"/>
</svg>
</a>