方式一：? 使用純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>