Question

堆！

我有一个分配给.slide类的动画

我将鼠标悬停在div上，当我将鼠标悬停在div上时，我希望将动画类分配给另一个div。使用CSS动画。

我很感激帮助和感谢！

代码： http://codepen.io/iheartkode/pen/wWMQmG?editors=0110

share-container {
  position: relative;
  width: 150px;
  height: 75px;
  background: #FF5722;
  border-radius: 10px;
  cursor: pointer;
  &:hover {
    // assign animation class to the share-icons class
  }
  p {
    text-align: center;
    color: white;
  }
}

.share-icons {
  position: absolute;
  z-index: -2;
  top: 15px;
  left: 4px;
  margin: 0 auto;
  width: 120px;
  height: auto;
  padding: 10px;
  background: coral;
  text-align: center;
  color: white;
  font-size: 2em;
  cursor: pointer;
}
.slide {
  animation: slide 2s linear;
  @keyframes slide {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(100px);
    }
  }
}

Answer 1

在澄清后编辑：在HTML中更改此内容：

<div class="share-icons slide">

这在您的SCSS中：

&:hover .slide {
    // assign animation class to the share-icons class
    animation: slide 2s linear;
    @keyframes slide {
      from {
        transform: translateY(0px);
      }
      to {
        transform: translateY(100px);
      }
    }
  }

然后根据需要调整动画。

这里有一个岔路口： http://codepen.io/denmch/pen/WxrLQZ

在悬停一个div时，在另一个div上分配动画类

1 个答案: