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