关于hover的范围及其在vue中的应用

时间：2023-03-31 00:42:33 CSS

hover我用过很多次，但是没有仔细讨论过它的范围。这次在项目中使用了hover，发现没有用。原因是hover对父元素和兄弟元素的作用有一定的限制。让我们写一些例子。看这里定义了两个兄弟元素，第一个元素定义了三个子元素子元素1

子元素2

子元素3

兄弟元素让我们先试试当鼠标悬停时第一个父元素，是否会引起子元素和兄弟元素的变化？(30deg);}我们可以看到三个子元素的字体都变成了白色，第一个子元素旋转了，但是兄弟元素没有旋转。这里我们可以知道：hover可以工作如果我们想让hover作用于它的兄弟元素怎么办？我们可以在元素前加一个“+”号。content1:hover+.content2{transform:rotate(30deg);好吧，那么如果我们再添加一个兄弟元素，会不会生效呢？.content1:hover+.content2{transform:rotate(30deg);}.content1:hover+.content3{变换：旋转（30度）；}这时候我们发现非相邻的兄弟元素不起作用，所以我们可以得出结论，hover只对后代元素和紧跟在该元素之后的兄弟元素生效。如果我们要在项目中使用实现鼠标悬停事件。如果不能使用悬停，可以使用鼠标触发事件。比如我的vue项目中，可以使用@mouseover和@mouseleave来实现鼠标离开：鼠标悬停：

上一篇：实战-使用CSS3三次贝塞尔曲线创建动画链接悬停效果

下一篇：高度自适应的输入框

关于hover的范围及其在vue中的应用相关文章