快捷導航

vue鼠標hover(懸停)改變background-color移入變色問題

更新時間：2022年10月10日 09:48:32 作者：533_

這篇文章主要介紹了vue鼠標hover(懸停)改變background-color移入變色問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

鼠標 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 = '';
? ? ? ? },
? ? }
});

多個顏色移入變色變不一樣的顏色

<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 = '';
    },

鼠標懸停更換圖片/文字內(nèi)容，動態(tài)展示/修改某些屬性

鼠標懸停時：@mouseenter 鼠標離開時：@mouseleave

利用以上來綁定相應(yīng)方法，例如：

<div @mouseleave="changeImageSrc(1, '')"?
@mouseenter="changeImageSrc(1, 'hover')"> //分別為鼠標懸停時和離開時綁定方法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:'我是第一塊..'
? ? };
? },

然后，方法中寫出來你想改變的事。

?changeImageSrc (key, way) {
? ? ? let tempStr = way === 'hover' ? '-click' : '' ?//若懸停，將“-click”后綴拼接到圖片的名稱里，即新圖片的名稱，鼠標離開則還加載舊圖片
? ? ? let color = way === 'hover' ? '#8CF8FF' : '#FFFFFF'?
? ? ? let opacity = way === 'hover' ? '100%' : '0' ? ?
? ? ? //通過傳遞的參數(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 = '我是第一塊' //懸停時更改文字
? ? ? ? ? break
? ? ? }
? ? ? //通過傳遞的參數(shù) ?分別讓不同的部件執(zhí)行不同的內(nèi)容
},

完結(jié)撒花～

（懸停事件失效時，記得打開控制臺看一下報什么錯，可能在你不知情的情況下有什么東西未定義，就阻擋了懸停事件的發(fā)生過程）

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: