本帖最后由 HULANG-BTB 于 2021-12-2 11:11 编辑
原因在于弹出的内容插入到了body上，鼠标移到弹出内容上的时候你的demo元素会失去hover状态宠儿display变成none导致消失。用变量记录并保持为flex就行了。
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入样式 -->
<link rel="stylesheet" >
<!-- 引入组件库 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<div class="tip">
（Element：Popover 弹出框 + Tooltip 文字提示）<br/>
需求：鼠标移入到Popover或Tooltip提示信息框区域，（上级）后面的黄色背景不隐藏，也保持显示状态；
</div>
<div class="demo">
<div class="name">鼠标移上来看效果</div>
<div class="box" :style="displayStyle">
<el-popover
v-model="popoverActive"
placement="top-start"
title="标题"
width="200"
trigger="hover"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
>
<el-button slot="reference" style="margin-right: 10px;">hover 激活</el-button>
</el-popover>
<el-tooltip v-model="tipActive1" v-model="hoverActive" class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<el-button>上左</el-button>
</el-tooltip>
<el-tooltip v-model="tipActive2" v-model="hoverActive" class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
<el-button>左上</el-button>
</el-tooltip>
<el-tooltip v-model="tipActive3" v-model="hoverActive" class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
<el-button>右上</el-button>
</el-tooltip>
<el-tooltip v-model="tipActive4" v-model="hoverActive" class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
<el-button>下左</el-button>
</el-tooltip>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
popoverActive: false,
tipActive1: false,
tipActive2: false,
tipActive3: false,
tipActive4: false,
}
},
computed: {
displayStyle() {
const { popoverActive, tipActive1, tipActive2, tipActive3, tipActive4 } = this
return popoverActive || tipActive1 || tipActive2 || tipActive3 || tipActive4 ? 'display:flex;' : ''
}
}
});
</script>
<style>
.tip{
margin: 50px auto 0 auto;
text-align: center;
line-height: 30px;
}
.demo {
position: relative;
margin: 50px auto 0 auto;
width: 200px;
text-align: center;
padding: 10px;
background-color: #f5f5f5;
}
.box {
position: absolute;
height: 200px;
top: 40px;
left: 0;
background-color: bisque;
display: none;
align-items: center;
padding: 10px;
}
.demo:hover .box {
display: flex;
}
</style>
</html>
| 
发表于 2021-12-2 10:26
|
发表于 2021-12-2 12:08
