css - 悬停在一个元素上会影响所有元素

Question

我想在文本超出 View 的左侧创建四个元素。将鼠标悬停在一个元素上时，只有这个应该滑入，但所有元素都会滑入。在这一点上我没有想法。为什么所有元素都滑入？

<div class="fixed-icons">
<div class="fixed-icons__item fixed-icons__item--booking">
    <span>booking</span>
</div>
<div class="fixed-icons__item fixed-icons__item--voucher">
    <span>voucher</span>
</div>
<div class="fixed-icons__item fixed-icons__item--phone">
    <span>phone</span>
</div>
<div class="fixed-icons__item fixed-icons__item--eye">
    <span>eye</span>
</div>
</div>

SCSS

.fixed-icons {
position: fixed;
top:40%;
right:0;

.fixed-icons__item {
border: 1px solid white;
background-color: #004576;
color: white;
padding: 0.25rem;
margin: 0.25rem;
cursor: pointer;
margin-right:-50px;
transition: 1s;

&:hover {
  transition: 1s;
  margin-right:0;

}
}
}

codepen demo

Answer 1

这是解决方案。

为 margin 属性设置动画会导致一些奇怪的结果 - 将其替换为 transform。

.fixed-icons {
  position: fixed;
  top:40%;
  right:0;

  .fixed-icons__item {
    border: 1px solid white;
    background-color: #004576;
    color: white;
    padding: 0.25rem;
    margin: 0.25rem;
    cursor: pointer;
    margin-right:-50px;
    transition: 1s;

    &:hover {
      transition: 1s;
      transform: translateX(-49px);

    }
  }
}

Here's the solution.


Animating the `margin` property caused some weird results - replaced it with `transform`.

<div class="fixed-icons">
    <div class="fixed-icons__item fixed-icons__item--booking">
        <span>booking</span>
    </div>
    <div class="fixed-icons__item fixed-icons__item--voucher">
        <span>voucher</span>
    </div>
    <div class="fixed-icons__item fixed-icons__item--phone">
        <span>phone</span>
    </div>
    <div class="fixed-icons__item fixed-icons__item--eye">
        <span>eye</span>
    </div>
</div>

Codepen Link