关于 hover 的作用域以及在 vue 中的应用

使用过很多次 hover 但是没有仔细探讨过他的作用域,这次在项目中使用了 hover 发现并没有生效

原因在于:
hover 在父级元素和兄弟级元素作用是有一定限制的

我们来写一些例子看一下
我这里定义了两个兄弟元素,在第一个元素里又定义了三个子元素

 <div class="content1">
        <div class="hover2">
            子元素 1
        </div>
        <div class="hover3">
            子元素 2
        </div>
        <div class="hover4">
            子元素 3
        </div>
</div>
<div class="content2">
    兄弟级元素
</div>

我们先来尝试一下 鼠标悬浮第一个父元素,是否可以引起子元素和兄弟元素的变化

.content1:hover {
    color: white;
}
.content1:hover .hover2 {
    transform: rotate(30deg);
}
.content1:hover.content2 {
    transform: rotate(30deg);
}

我们可以看到 三个子元素字体都变成了白色,第一个子元素进行了旋转的变化

但是兄弟元素并没有发生旋转的动作

到这里我们可以知道:
hover可以作用于其子元素

但如果我们想要 hover 作用于其兄弟元素该怎么办呢?
我们可以在作用元素前加一个"+"号

.content1:hover +.content2 {
    transform: rotate(30deg);
   }

这样就可以了

那如果我们再添加一个兄弟级元素会生效吗?

        .content1:hover+.content2 {
            transform: rotate(30deg);
        }
        .content1:hover+.content3 {
            transform: rotate(30deg);
        }

这时我们发现 不相邻的兄弟元素并没有起作用

那我们就可以得出结论了
hover只对后代元素和紧接在元素后的兄弟元素才生效

那如果我们想在项目中实现鼠标悬浮的事件,无法用 hover 实现的话可以用鼠标触发事件

比如我在 vue 项目中,可以使用@mouseover和@mouseleave来实现

鼠标离开:

 <div @mouseleave="setshow=false">
 </div>

鼠标悬浮:

 <div @mouseover="setshow=true">
 </div>