[英]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.