css鼠标悬停出现区域,css伪元素实现鼠标悬停出现对话框

iconfont icon-shezhi是引入阿里图库的图标

修改密码

退出登录

css

.icon{

color:#aaa;

font-size: 24px;

padding: 10px;

}

.icon:hover .dialaing{

display: block;

}

.dialaing{

margin-top: 10px;

font-size: 16px;

display: none;

margin-left: -54px;

position: fixed;

background-color: #fff;

box-shadow: 5px 5px 15px 2px #c4c4c4;

ul{

padding: 10px;

}

li{

color:#000;

text-align: center;

width: 80px;

cursor: pointer;

padding: 5px 10px;

}

}

.dialaing::after{

content: '';

position: absolute;

border: 8px solid;

border-color: transparent transparent #c5c5c5 transparent;

left: 60px;

top: -16px;

}

.dialaing::before{

content: "";

width: 0;

height: 0;

border: 8px solid;

border-color: transparent transparent #fff transparent;

position: absolute;

top: -16px;

left: 60px;

z-index: 2;

}