vue中使用hover选择器无效的问题
使用hover选择器无效
开头点题，先说结论，父组件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，怎么可能经过组件啊，这是正常人能想出来的剧情吗？我都佩服自己啊。
就因为这个看起来很简单的问题，浪费了大量的时间，所以记下来，给更多人看到。
vue的hover鼠标悬停hover事件
vue中没有hover，可以使用css伪类：hover 或者@mouseenter @mouseleave @mouseover @mouseout 等处理类似需求
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
关于vue v-for循环解决img标签的src动态绑定问题
今天小编就为大家分享一篇关于vue v-for循环解决img标签的src动态绑定问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue-router 基于后端permissions动态生成导航菜单的示例代码
本文主要介绍了vue-router 基于后端permissions动态生成导航菜单的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了vue3.0中的keep-alive使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue router 路由跳转方法概述,使用到Vue的项目，我们最常见使用的就是Vue配套的Vue Router库，本文结合示例代码给大家详细讲解，需要的朋友可以参考下2022-12-12
路由权限控制常用于后台管理系统中，对不同业务人员能够访问的页面进行一个权限的限制。本文主要介绍了两种Vue 路由权限控制，具有一定的参考价值，感兴趣的可以了解一下2021-10-10
这篇文章主要介绍了VUE对Storage的过期时间设置,及增删改查方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要给大家介绍了关于如何使用宝塔部署Vue项目的相关资料,宝塔面板提供了非常方便的方式来部署 Vue 项目,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-08-08
本篇文章主要介绍了浅谈vue中数据双向绑定的实现原理 ，主要使用v-model这个数据双向绑定，有兴趣的可以了解一下2017-09-09
vue.js自定义组件实现v-model双向数据绑定的示例代码
这篇文章主要介绍了vue.js自定义组件实现v-model双向数据绑定的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要给大家深入的介绍了关于vue.js中v-if和v-show的相关资料，文中详细介绍两者的共同点和区别，通过图文介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
最新评论