Vue中为什么hover选择器不起作用，如何解决？

本文共计668个文字，预计阅读时间需要3分钟。

目录- 使用hover选择器无效- Vue的hover鼠标悬停事件无效- 父组件z-index为负，鼠标无法悬停在组件上- 心情复杂，特地来给兄弟们讲个笑话

结论- 父组件z-index设置为负值，导致子组件无法接收鼠标悬停事件。解决方法是将父组件的z-index值设置为正值或移除z-index属性。

目录

• 使用hover选择器无效
• vue的hover鼠标悬停hover事件

使用hover选择器无效

开头点题，先说结论，父组件z-index为负，鼠标根本无法位于组件上。

心情复杂，特地来给兄弟们讲个笑话，开心一下。

事情是这样的，今天想实现个很简单的功能，鼠标移上去会根据组件类型变色给用户一定提示的那种，使用css的hover选择器，很简单就可以实现了，拿出键盘，哐哐一顿操作，完成。代码大概就是这么简单

.taskAction i:hover{     color:red; }

结果，项目运行起来完全没有任何提示效果，我懵了，代码过于简单，完全不知道该从哪下手解决，百度谷歌一通操作，结果大概是冒号后空格，类型名错了，link active的顺序这几类…

一目了然，我的错不是这几种啊，但没有效果他肯定我的错啊，那么错哪了？

就盯着那几行简单的代码瞅啊瞅啊，瞅了一个小时，也没用啊，完全看不出来。于是下定决心，视野打开，调其他的组件，这一调试，差点气成高血压啊。