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

我有一个关于CSS悬停缩放效果的问题

我从codepen.io创建了这个

在本演示中，您可以看到红色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;

---

并且还向悬停事件代码添加一个高值z索引，以使项目向前移动。类似于

z-index:100