vue中使用hover选择器无效

最新推荐文章于 2024-01-30 17:56:44 发布

saint_eye

最新推荐文章于 2024-01-30 17:56:44 发布

阅读量1.7k

点赞数

文章标签： vue.js css

本文链接：https://blog.csdn.net/saint_eye/article/details/121707269

版权

本文讲述了作者在实现鼠标悬停变色功能时遇到的问题，由于设置了父组件z-index为负值，导致鼠标无法触发hover效果。通过这个笑话般的经历，提醒开发者注意z-index负值可能带来的不可预见问题，节省调试时间。

摘要由CSDN通过智能技术生成

开头点题，先说结论，父组件z-index为负，鼠标根本无法位于组件上。
心情复杂，特地来给兄弟们讲个笑话，开心一下。
事情是这样的，今天想实现个很简单的功能，鼠标移上去会根据组件类型变色给用户一定提示的那种，使用css的hover选择器，很简单就可以实现了，拿出键盘，哐哐一顿操作，完成。代码大概就是这么简单

.taskAction i:hover{
    color:red;
}

结果，项目运行起来完全没有任何提示效果，我懵了，代码过于简单，完全不知道该从哪下手解决，百度谷歌一通操作，结果大概是冒号后空格，类型名错了，link active的顺序这几类…一目了然，我的错不是这几种啊，但没有效果他肯定我的错啊，那么错哪了？就盯着那几行简单的代码瞅啊瞅啊，瞅了一个小时，也没用啊，完全看不出来。于是下定决心，视野打开，调其他的组件，这一调试，差点气成高血压啊。给大家看下代码

.taskBody{
    position: relative;
    font-size: 18px;
    background:black;
    width:400px;
    height:900px;
    color:#BBBBBB;
    z-index:-10;
}

到这里，大家应该能看出问题出在哪里了，z-index:-10（顺口提一下，z-index似乎只在position: relative/absolute条件下生效）啊，神特喵-10，hover是鼠标选择器，在鼠标经过组件时生效，做出各种改动，我的组件z轴设为-10，怎么可能经过组件啊，这是正常人能想出来的剧情吗？我都佩服自己啊。
就因为这个看起来很简单的问题，浪费了大量的时间，所以记下来，给更多人看到，帮大家节约时间。