本文主要是介绍html div长方形,求助,我想做一个带有凸起的 长方形div,怎么才能实现?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
我想做一个这种形状的 div
代码如下
加
入
我
们
.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 事件
这篇关于html div长方形,求助,我想做一个带有凸起的 长方形div,怎么才能实现?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!