如上图所示：鼠标划入"条件区域",对应ul元素改变背景颜色，且划入内容区域时，ul元素的背景颜色保持不变。只有当鼠标划出"内容区域"，或者切换到"条件区域"的其他ul元素上时，背景颜色才恢复
HTML
<template><div class="apps"><div class="parent"><ulv-for="(item, index) in 5":key="index"@mouseover="mouseoverParent(index)"@mouseout="mouseoutParent(index)"class="parent-ul"><li>触摸条件-{{ item }}</li></ul><divclass="other-div"@mouseover="mouseoverOther()"@mouseout="mouseoutOther()"><ul v-for="(item, index) in 10" :key="index"><li>内容-{{ item }}</li></ul></div></div></div>
</template>
JS
this.index 初始值为 0
mouseoverParent(index) {let ii = index + 1this.index = iconst style = "background:#ff6700"document.querySelector(`.parent > :nth-child(${i})`).style = style},mouseoutParent(index) {let ii = index + 1this.index = iconst style = "background:#b0b0b0"document.querySelector(`.parent > :nth-child(${i})`).style = style},mouseoverOther() {const style = "background:#ff6700"document.querySelector(`.parent > :nth-child(${this.index})`).style =style},mouseoutOther() {const style = "background:#b0b0b0"document.querySelector(`.parent > :nth-child(${this.index})`).style =style},
SCSS
.apps {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}.parent {position: relative;width: 200px;height: 400px;background: #b0b0b0;text-align: center;.parent-ul {padding-top: 30px;height: 40px;width: 100%;&:hover ~ .other-div {width: 400px;}li {font-size: 16px;}}
}.other-div {overflow: hidden;height: 0;transition: all 0.3s;position: absolute;width: 0; // 当元素内存在内容时,设置宽度才显示height: 400px;left: 200px;top: 0;background: palevioletred;box-shadow: 5px 0 15px -5px rgba(0, 0, 0, 0.6);display: inline-flex;flex-wrap: wrap;flex-direction: column;align-content: flex-start;&:hover {width: 400px;}ul {width: 120px;height: 60px;li {font-size: 16px;}}
}
)
