我想做一个这种形状的 div
代码如下
相亲QQ群[1] 相亲QQ群[2] 相亲QQ群[3] 相亲QQ群[4] 相亲QQ群[5]加
入
我
们
.leftSide {
height: 300px;
background: rgba(0,0,204,0);
position: fixed;
top: 50%;
margin-top: -100px;
z-index: 100;
left: -120px;
}
.qq_number {
width: 120px;
background: rgba(0,255,0,1);
height: 100%;
cursor: pointer;
}
.join_us {
width: 30px;
height: 150px;
background: rgba(204,0,0,1);
margin-top: 75px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
cursor: pointer;
margin-left: 0px;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
color: rgba(255,255,255,1);
}
这时候遇到问题就是 .leftSide:hover时，在【加入我们】的上下的空白处也会有 hover事件
请问如何才能做出一个 div， 左半边的比较大，右半边比较小
我修改后下
.leftSide:hover .join_us{
animation: bounceInRight 0.5s 1;
animation-direction: normal;
-webkit-animation-direction: normal; /* Safari 和 Chrome */
animation-fill-mode : forwards;
}
.leftSide:hover .qq_number {
animation: bounceInRight 0.5s 1;
animation-direction: normal;
-webkit-animation-direction: normal; /* Safari 和 Chrome */
animation-fill-mode : forwards;
}
但是空白处还是会触发 hover 事件