显示隐藏 显示的框内可点击的例子
描述:
- 鼠标移入
seen
显示一个浮框seen-show
,鼠标seen
移出后浮框seen-show
消失,当鼠标在seen-show
的内部的时候,鼠标可点击seen-show
里的按钮。 - 方法:
seen 在 hover的时候,seen-show显示
把seen-show默认为display:none;
隐藏,在seen:hover的时候,接着seen-show的display:block;
显示即可。(需注意:seen-show必须放在seen盒子里面
)
<template>
<div>
<div class="seen">
<div class="seen-show" @click="btnInfo">
可点击
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
btnInfo () {
alert('点击了元素')
}
}
}
</script>
<style lang="scss">
.seen{
width: 250px;
height: 300px;
background-color: lightblue;
.seen-show{
display: none;
width: 100px;
height: 40px;
color: #fff;
background: lightcoral;
line-height: 40px;
cursor: pointer;
}
&:hover .seen-show{
display: block;
}
}
</style>
代码在.vue文件中实现的.