代码如下：
<template><div class="outer"><div class="left"></div><div class="aTest2"><div class="box">显示方框</div><div class="aTest3"></div></div>
</div></template><style scoped lang='scss'>
.outer{display: flex;justify-content: space-between;position: relative;.left{height: 60px;width: 100%;position: relative;z-index: 100; // 给他设置z-index的主要目的是遮挡动画 transform 要不动画会从顶部而不是现在的位置移动background-color: deeppink;}.aTest2{.box{ // 给他设置z-index的主要目的是遮挡动画 transformposition: relative;z-index: 100; // z-index的使用要结合 positionwidth: 60px;height: 60px;background-color: pink;text-align: center;line-height: 60px;&:hover { // 加的是box的hover事件background-color: yellow;}}&:hover { // 加的是aTest2的hover事件.aTest3 {opacity: 1;transform: none;}}.aTest3{width: 200px;height: 300px;position: absolute;z-index: 1;right: 15px;top: 60px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);transform: translateY(-200px) scale(1, 0);transition: all 0.4s, 0.2s;margin-top: 15px;&::before { // 利用伪元素画三角content: "";position: absolute;right: 14px;top: -10px;width: 20px;height: 20px;background: #fff;transform: scale(0.6, 1) rotate(45deg);box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);}}}
}
</style>
展示结果如下：
需要注意的是z-index的使用需要结合位置position（absolute，relative都行）否则z-index无效
