vue中使用hover選擇器無效的問題
使用hover選擇器無效
開頭點(diǎn)題，先說結(jié)論，父組件z-index為負(fù)，鼠標(biāo)根本無法位于組件上。
心情復(fù)雜，特地來給兄弟們講個笑話，開心一下。
事情是這樣的，今天想實(shí)現(xiàn)個很簡單的功能，鼠標(biāo)移上去會根據(jù)組件類型變色給用戶一定提示的那種，使用css的hover選擇器，很簡單就可以實(shí)現(xiàn)了，拿出鍵盤，哐哐一頓操作，完成。代碼大概就是這么簡單
.taskAction i:hover{
? ? color:red;
}結(jié)果，項(xiàng)目運(yùn)行起來完全沒有任何提示效果，我懵了，代碼過于簡單，完全不知道該從哪下手解決，百度谷歌一通操作，結(jié)果大概是冒號后空格，類型名錯了，link active的順序這幾類…
一目了然，我的錯不是這幾種啊，但沒有效果他肯定我的錯啊，那么錯哪了？
就盯著那幾行簡單的代碼瞅啊瞅啊，瞅了一個小時，也沒用啊，完全看不出來。于是下定決心，視野打開，調(diào)其他的組件，這一調(diào)試，差點(diǎn)氣成高血壓啊。
給大家看下代碼
.taskBody{
? ? position: relative;
? ? font-size: 18px;
? ? background:black;
? ? width:400px;
? ? height:900px;
? ? color:#BBBBBB;
? ? z-index:-10;
}到這里，大家應(yīng)該能看出問題出在哪里了，z-index:-10（順口提一下，z-index似乎只在position: relative/absolute條件下生效）啊，神特喵-10，hover是鼠標(biāo)選擇器，在鼠標(biāo)經(jīng)過組件時生效，做出各種改動，我的組件z軸設(shè)為-10，怎么可能經(jīng)過組件啊，這是正常人能想出來的劇情嗎？我都佩服自己啊。
就因?yàn)檫@個看起來很簡單的問題，浪費(fèi)了大量的時間，所以記下來，給更多人看到。
vue的hover鼠標(biāo)懸停hover事件
vue中沒有hover，可以使用css偽類：hover 或者@mouseenter @mouseleave @mouseover @mouseout 等處理類似需求
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示
這篇文章主要介紹了Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
隨著搬運(yùn)工的逐漸增加,原創(chuàng)作者的利益收到了極大的影響。所以給圖片或視頻加上水印顯得極其重要。本文分享一個由canvas和vue.js制作的圖片水印添加器，需要的可參考一下2022-06-06
這篇文章主要為大家介紹了一些Vue.js表單控件綁定示例盤點(diǎn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了Vue命令式組件的編寫與應(yīng)用小結(jié),在這篇文章中,我會帶你了解命令式組件的基本概念,并通過一些簡單的示例來展示它們是如何工作的,需要的朋友可以參考下2024-03-03
在Vue開發(fā)中使用:style綁定樣式是常見需求,應(yīng)注意:class與:style的配合使用,錯誤的使用可能導(dǎo)致樣式不生效,正確的方法是使用數(shù)組綁定多個樣式,這些技巧有助于提高開發(fā)效率和保持代碼整潔,感興趣的朋友跟隨小編一起看看吧2024-09-09
這篇文章主要介紹了vue基于element的區(qū)間選擇組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue組件傳值過程接收不成功的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue vantUI tab切換時 list組件不觸發(fā)load事件的問題及解決方法
這篇文章主要介紹了vue vantUI tab切換時 list組件不觸發(fā)load事件的解決辦法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細(xì)介紹了Vue表情輸入組件，微信face表情組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
前端開發(fā)需要經(jīng)常使用ECharts圖表渲染數(shù)據(jù)信息，在一個項(xiàng)目中我們經(jīng)常需要使用多個圖表，選擇封裝ECharts組件復(fù)用的方式可以減少代碼量，增加開發(fā)效率。感興趣的可以閱讀一下本文2023-04-04