[英]Css hover zoom effect wont work
我对CSS悬停缩放效果有一个问题。
我已经从codepen.io创建了这个DEMO
在此演示中,您可以看到红色div。 单击div时, .CRtW11
将打开。 所以我想为.ReaC
div添加悬停缩放效果。 我尝试了以下变换效果,但没有用。
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
我不明白我在哪里做错了任何人都可以在这方面帮助我?
HTML
CSS
.cR {
width:20px;
height:20px;
position:relative;
background-color:red;
cursor:pointer;
}
.CRtW11 {
position:absolute;
width:215px;
height:40px;
background-color:blue;
opacity:0;
transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-webkit-transform-origin: left bottom 0px;
-webkit-transform: scale(0);
box-shadow: 0 3px 10px 0 rgba(0,0,0,0.24);
z-index:1;
margin-top:-45px;
border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
padding:5px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.CRtW11-active {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
opacity: 1;
transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-webkit-transform: scale(1);
}
.ReaC {
float:left;
position:relative;
width:30px;
height:30px;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
background-color:red;
margin-right:5px;
display:none;
opacity:0;
-moz-transition: ease 0.2s;
-o-transition: ease 0.2s;
-webkit-transition: ease 0.2s;
transition: ease 0.2s;
}
.ReaC:hover
{
background:yellow;
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
尝试从.ReaC-active
删除以下内容
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.