vue 鼠标经过时显示/隐藏其他元素

方式一：  使用纯css方式 ,   :hover是可以控制其他元素

1、 当两个元素是父子关系

<div class="all_" ><div> <i class="iconfont icon-sun sun"></i></div>
</div>

.all_{}
.sun {display: none; /* 默认不显示 */ 
}
.all_:hover  .sun {display: block; /* 鼠标经过时显示 */
}

2、当两个元素是兄弟 (但似乎无法在 hover-b 经过时改变 hover-a)

<template><div ><div class="hover-a">鼠标经过我</div><div class="hover-b">这是鼠标经过时显示的内容</div></div>
</template><style>.hover-a { 
}
.hover-b {display: none; /* 默认不显示 */ 
}
.hover-a:hover + .hover-b {display: block; /* 鼠标经过时显示 */
}
</style>

方式二： 用jquery

<div ref="boxRef" ><div><i ref="sun" class="iconfont icon-sun"  style="display:none"></i></div>
</div>

methods: {show_sun() {let boxRef = $(this.$refs.boxRef)let sun = $(this.$refs.sun)console.log('show_sun', boxRef, sun);boxRef.hover(function () { sun.css('display', 'block');}, function () {sun.css('display', 'none');});},
},
mounted() { setTimeout(() => { this.show_sun();}, 1000);
},

方式三： 

<template><div class="container"><div class="hover-target" @mouseover="isHovered = true" @mouseleave="isHovered = false">鼠标经过我</div><div class="hover-content" v-show="isHovered">这是鼠标经过时显示的内容</div></div>
</template><script>
export default {data() {return {isHovered: false};}
}
</script>