[英]Css hover zoom effect wont work
I have one problem about CSS hover zoom effect. 我对CSS悬停缩放效果有一个问题。
I have created this DEMO from codepen.io 我已经从codepen.io创建了这个DEMO
In this demo you can see there is red color div. 在此演示中,您可以看到红色div。 When you click the div
.CRtW11
will opening. 单击div时,
.CRtW11
将打开。 So i want to add hover zoom effect for .ReaC
div. 所以我想为
.ReaC
div添加悬停缩放效果。 I tried the following transform effect but it doesn't worked. 我尝试了以下变换效果,但没有用。
-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);
I don't understand where i am doing wrong anyone can help me in this regard ? 我不明白我在哪里做错了任何人都可以在这方面帮助我?
HTML HTML
CSS 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);
}
Try removing the following from .ReaC-active
尝试从
.ReaC-active
删除以下内容
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.