vue鼠標(biāo)hover(懸停)改變background-color移入變色問(wèn)題
鼠標(biāo) hover(懸停)改變 background-color
<div id="demo"> ? ?<div @mouseenter="mouseEnter"? ? ? ? ? @mouseleave="mouseLeave"? ? ? ? ? :style="active"> ? ??? ??? ??? ?Hover over me! ? ?</div> </div>
var demo = new Vue({
? ? el: '#demo',
? ? data: {
? ? ? ? active: ''
? ? },
? ? methods: {
? ? ? ? mouseEnter: function(){
? ? ? ? ? ? this.active = 'background-color: #cccccc';
? ? ? ? },
? ? ? ? mouseLeave: function () {
? ? ? ? ? ? this.active = '';
? ? ? ? },
? ? }
});多個(gè)顏色 移入變色 變不一樣的顏色

<div v-for="(item, index) in list" :key="index">
<div
class="dlItem"
@mouseenter="handleMouseEnter(item)"
@mouseleave="handleMouseLeave(item)"
:style="{
backgroundColor: item.mouseFlag?hoverBgColor:dlColorList[item.name],
}"
>
{{item.name}} {{item.age}}
</div>
</div>
data() {
return {
list: [
{
name: "a",
age: 14,
},
{
name: "b",
age: 12,
},
{
name: "c",
age: 15,
},
],
dlColorList: {
a: "yellow",
b: "pink",
c: "red",
},
hoverColorList: {
a: "gray",
b: "aqua",
c: "brown",
},
hoverBgColor: "",
}
}// 移入
handleMouseEnter(item) {
// item.mouseFlag = true;
this.$set(item,'mouseFlag',true);
this.hoverBgColor = this.hoverColorList[item.name];
},
// 移出
handleMouseLeave(item) {
// item.mouseFlag = false;
this.$set(item,'mouseFlag',false);
this.hoverBgColor = '';
},
鼠標(biāo)懸停更換圖片/文字內(nèi)容,動(dòng)態(tài)展示/修改某些屬性
鼠標(biāo)懸停時(shí):@mouseenter 鼠標(biāo)離開時(shí):@mouseleave
利用以上來(lái)綁定相應(yīng)方法,例如:
<div @mouseleave="changeImageSrc(1, '')"?
@mouseenter="changeImageSrc(1, 'hover')"> //分別為鼠標(biāo)懸停時(shí)和離開時(shí)綁定方法changeImageSrc,并傳遞參數(shù)
? ? ? ? ? <img :src="circle" alt="" /> ? //為img綁定地址 circle,在data中聲明
? ? ? ? ? <span class="span" ref="span1">金融多頭借貸反欺詐</span>
? ? ? ? ? <div class="link-icon" ref="shape1"></div>
? ? ? ?</div>
?<div class="text"> {{text}} </div>. //為div綁定文字內(nèi)容,在data中聲明data中示例:
data() {
? ? return {
? ? ?circle: require("@/assets/poc/circle.png"),
? ? ?text:'我是第一塊..'
? ? };
? },然后,方法中寫出來(lái)你想改變的事。
?changeImageSrc (key, way) {
? ? ? let tempStr = way === 'hover' ? '-click' : '' ?//若懸停,將“-click”后綴拼接到圖片的名稱里,即新圖片的名稱,鼠標(biāo)離開則還加載舊圖片
? ? ? let color = way === 'hover' ? '#8CF8FF' : '#FFFFFF'?
? ? ? let opacity = way === 'hover' ? '100%' : '0' ? ?
? ? ? //通過(guò)傳遞的參數(shù)判斷是否懸停,根據(jù)需求分別定義不同值的變量
? ? ??
? ? ? switch (key) {
? ? ? ? case 1:
? ? ? ? ? this.circle = require(`@/assets/poc/circle${tempStr}.png`) ?//換圖片 (新圖片的名稱就是拼接后的名稱)
? ? ? ? ? this.$refs.span1.style.color = color ?//為ref綁定的文字 更改顏色
? ? ? ? ? this.$refs.shape1.style.opacity = opacity //為ref綁定的內(nèi)容 設(shè)置透明度(設(shè)置展示與否)
? ? ? ? ? this.text = '我是第一塊' //懸停時(shí)更改文字
? ? ? ? ? break
? ? ? }
? ? ? //通過(guò)傳遞的參數(shù) ?分別讓不同的部件執(zhí)行不同的內(nèi)容
},完結(jié)撒花~
(懸停事件失效時(shí),記得打開控制臺(tái)看一下報(bào)什么錯(cuò),可能在你不知情的情況下有什么東西未定義,就阻擋了懸停事件的發(fā)生過(guò)程)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡(jiǎn)單方法(無(wú)廢話版本)
ue動(dòng)態(tài)路由(約定路由),聽起來(lái)好像很玄乎的樣子,但是你要是理解了實(shí)現(xiàn)思路,你會(huì)發(fā)現(xiàn)沒(méi)有想象中的那么難,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡(jiǎn)單方法,需要的朋友可以參考下2023-02-02
element ui el-date-picker組件默認(rèn)值方式
這篇文章主要介紹了element ui el-date-picker組件默認(rèn)值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
vue.js中toast用法及使用toast彈框的實(shí)例代碼
這篇文章主要介紹了vue.js中toast用法及使用toast彈框的實(shí)例代碼,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒加載,需要的朋友可以參考下2018-08-08
Vue2+element-ui實(shí)現(xiàn)面包屑導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了Vue2+element-ui使用面包屑導(dǎo)航的正確姿勢(shì),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
詳解element-ui表格的合并行和列(非常細(xì)節(jié))
最近在需求中遇到了elementUI合并行,索性給大家整理下,這篇文章主要給大家介紹了關(guān)于element-ui表格的合并行和列的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue如何使用ElementUI對(duì)表單元素進(jìn)行自定義校驗(yàn)及踩坑
有一些驗(yàn)證不是通過(guò)input select這樣的受控組件來(lái)觸發(fā)驗(yàn)證條件的 ,可以通過(guò)自定義驗(yàn)證的方法來(lái)觸發(fā),下面這篇文章主要給大家介紹了關(guān)于Vue如何使用ElementUI對(duì)表單元素進(jìn)行自定義校驗(yàn)及踩坑的相關(guān)資料,需要的朋友可以參考下2023-02-02
Vue注冊(cè)模塊與登錄狀態(tài)的持久化實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Vue注冊(cè)模塊與登錄狀態(tài)的持久化實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue實(shí)現(xiàn)萬(wàn)年日歷的示例詳解
又是一個(gè)老生常談的功能,接下來(lái)會(huì)從零實(shí)現(xiàn)一個(gè)萬(wàn)年日歷,從布局到邏輯,再到隨處可見的打卡功能。文中的示例代碼簡(jiǎn)潔易懂,需要的可以參考一下2023-01-01

