背景:鼠标悬浮时显示删除,放开后显示组件名
解决:通过display:none和display:block显示和隐藏元素;
使用 div +p选择器选择当前div的下一个紧跟的p元素
<div v-if="!preview" class="name">{{propertyData.name}}</div>
<!-- 删除按钮 -->
<div v-if="!preview" class="delete">删除</div>
.component {
position: relative;
cursor: move;
min-height: 40px;
// name和delete显示效果
.name,
.delete {
padding: 4px 12px;
background: #fff;
position: absolute;
white-space: nowrap;
border: 2px;
height: 18px;
border-radius: 2px;
line-height: 18px;
cursor: pointer;
font-size: 12px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
color: #323232;
left: 380px;
top: 0;
// 左侧设置透明的三角形
&::before {
content: "";
line-height: 8px;
position: absolute;
left: -8px;
// 父元素的一半9px
top: 9px;
// 一边设置透明
border-width: 4px;
border-style: solid;
border-color: transparent #fff transparent transparent;
}
}
// name和delete显示和隐藏交互
.name {
display: block;
}
.delete {
display: none;
}
// 不能以name:hover 去让.delete显示,而是让父级hover时就显示delete,这样就不会在显示和隐藏之间反复横跳
&:hover {
.name {
display: none;
}
// div+p选择所有紧跟在 <div> 元素之后的第一个 <p> 元素
.delete {
display: block;
}
}
}