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

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

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

.all_{

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

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

方式二： 用jquery

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);
},

方式三：