Question

我有一个关于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);
}

Answer 1

尝试从.ReaC-active

中删除以下内容

-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;

Css悬停缩放效果不会起作用

1 个答案: