我的需求是这样的,鼠标悬停在logo上会有一个很浅的变白效果以便和其它地方区分开,或许你会说直接css上hover选择器里换个颜色不就好了,但是因为我这个是能挑选颜色的所以我就放弃了这种方法,所以这个时候我们就需要加上一个div
<div v-if="isCollapse" class="logo-wrapper fl" style="width: 64px;">
<div class="cover"></div>
<span class="logo">S</span>
</div>
.logo-wrapper .cover {
height: 64px;
}
.logo-wrapper:hover .cover {
background-color: #fff;
opacity: 0.1;
}
.logo-wrapper .logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 101;
font-size: 20px;
color: #fff;
}
千万要注意的是,任何东西都不要放在cover里面,因为opacity是可继承的,并且没有任何办法取消它,所以在这里我的子元素只能用绝对定位脱离文档流了
这是最终的效果~