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>