效果如下:
鼠标hover锁的时候出现气泡提示。
html结构
<div class="lock">
<i class="el-icon-lock" ></i>
</div>
<div class="lockTips">修改URL可能会导致关键词排名的浮动,
流量的波动等问题,非必要<span>不建议修改</span>
</div>
css样式
// 锁
.lock {
position: absolute;
right: 6px;
top: 2px;
.el-icon-lock {
font-size: 20px;
color: #666;
}
}
.lock:hover {
cursor: pointer;
}
//hover的时候对兄弟节点操作
.lock:hover + .lockTips {
display: block;
}
.lockTips {
width: 524px;
line-height: 40px;
background: #e6f7ff;
border-radius: 4px 4px 4px 4px;
border: 1px solid #91d5ff;
position: absolute;
z-index: 1000;
padding: 0px 16px;
opacity: 1;
right: 0;
top: -47px;
color:rgba(0, 0, 0, 0.85);
span{
color: rgba(252, 104, 50, 1);
}
}
.lockTips::after {
content: "";
position: absolute;
bottom: -5px;
right: 9px;
width: 0;
height: 0;
border-bottom: 10px solid #e9f7fe;
border-right: 10px solid transparent;
transform: rotate(-45deg);
z-index: -1;
}
.lockTips::before {
content: "";
position: absolute;
bottom: -6px;
right: 9px;
width: 0;
height: 0;
border-bottom: 10px solid rgba(145, 213, 255, 1);
border-right: 10px solid transparent;
transform: rotate(-45deg);
z-index: -1;
}