背景颜色悬停动画从下到上

Question

我有以下问题。我有一个块，希望背景颜色通过悬停从下到上有动画。请让我知道我的麻烦在哪里？非常感谢。

docker-compose

.right-block--wrapper {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 0 5px 1px rgba(50, 50, 50, 0.75);
    display: inline-block;
    margin-left: -30px;
    margin-top: 9px;
    padding: 15px 19px 12px;
    width: 100%;
    max-width: 429px;
    position: relative;
    z-index: 2;
}
.right-block--wrapper:before {
    background:#474747;
    bottom: 0;
    content: "";
    left: 0;
    position:
    absolute;
    right: 0;
    top: 0;
    transform:scaleY(0);
    transform-origin: 50% 100%;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
    z-index: -1;
}
.right-block--wrapper:hover {
    background: #474747;
}

Answer 1

当::before元素悬停时，您没有将任何样式应用于.right-block--wrapper伪元素。

我想也许你打算这样做：

.right-block--wrapper {
  background: #fff none repeat scroll 0 0;
  box-shadow: 0 0 5px 1px rgba(50, 50, 50, 0.75);
  display: inline-block;
  margin-left: -30px;
  margin-top: 9px;
  padding: 15px 19px 12px;
  width: 100%;
  max-width: 429px;
  position: relative;
  z-index: 2;
}

.right-block--wrapper:before {
  background: #474747;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
  z-index: -1;
}

.right-block--wrapper:hover:before {
  transform: scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="right-block--wrapper">
  <p>Demo Content</p>
</div>
<!-- right-block--wrapper -->