鼠标移到到div上,div放大
实现效果css样式/* 鼠标移入div放大 */.lczy_content_item {transition: all 0.3s;}.lczy_content_item:hover {background-color: #1975E6;color: #ffffff;cursor: pointer;transform:
·
实现效果
css样式
/* 鼠标移入div放大 */
.lczy_content_item {
transition: all 0.3s;
}
.lczy_content_item:hover {
background-color: #1975E6;
color: #ffffff;
cursor: pointer;
transform: scaleY(1.1) translateZ(0);
}
HTML代码
<div class="lczy_content_item" onmouseover="mouseOver(this,event)" onmouseout="mouseOut(this,event)">
<span class="row_1">1</span>
<h2 class="row_2 pt10">用户注册</h2>
<p class="row_3">注册用户可以进行网上申报,跟踪项目办理进度,上报项目建设信息和查询项目监管信息</p>
<p class="row_4 pt10">→</p>
</div>
<script>
function mouseOver(t, e) {
$(t).children('span:first').css({
'background-color': '#FFFFFF',
color: '#1975E6',
})
}
function mouseOut(t,e){
$(t).children('span:first').css({
'background-color': '#6F6F6F',
color: '#FFFFFF',
})
}
</script>
transition 简写属性 作用:动画过渡
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
https://www.w3school.com.cn/cssref/pr_transform.asp
- 移动 tasanlate
- 缩放 scale
- 旋转 rotate
更多推荐
已为社区贡献1条内容
所有评论(0)