javascript - 背景颜色从下到上悬停动画
问题描述
我有以下问题。我有一个块,希望背景颜色通过悬停从下到上具有动画。请让我知道我的麻烦在哪里?非常感谢。
.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;
}
<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 -->
解决方案
当元素悬停时,您没有将任何样式应用于::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 -->
推荐阅读
- android - 我正在使用以下代码将数据保存在 firebase 上。但数据不保存在 firebase 中,我该如何解决?
- node.js - 在nodejs mongodb中通过id查找文档
- c - OpenCv 内存泄漏 C
- python - 有没有一种方法可以在没有复制方法的情况下在 python 中创建自定义字典?
- swift - 通过输入和打印输出来打印垃圾字符
- jquery - 将 HTML 表格导出到 excel - 保存我们的问题
- google-apps-script - 检查日期并插入带有列和行的工作表
- ios - 分页限制在 getStream iOS 中不起作用
- python - 处理许多 csv 文件,在 Python 中添加元数据
- android - 为什么我的 BroadcastReceiver 的 onReceive 中的 intent.getAction() 返回 null?