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

chaosama

已于 2022-04-08 09:20:47 修改

阅读量5.2k

点赞数 1

分类专栏：前端造轮子文章标签： html

于 2020-06-13 10:29:46 首次发布

本文链接：https://blog.youkuaiyun.com/chaosama/article/details/106728779

版权

前端造轮子专栏收录该内容

5 篇文章

订阅专栏

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

          <div class="iconfont icon-shezhi icon">
            <div class="dialaing">
              <ul>
                <li>修改密码</li>
                <li @click="logout">退出登录</li>
              </ul>
            </div>
          </div>

css:less

.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;
}