vue项目中鼠标移入就更换菜单的背景颜色

样图:

vue项目中鼠标移入就更换菜单的背景颜色

 

 

 思路:

  动态绑定class,用@mouseenter()绑定一个事件,并将列的索引index传入,然后在data里建一个变量来保存,默认-1 0的话页面刷新后第一个背景色就已经显示了

html  

  

  <div class="item" v-for="(one, index) in categoryList" :key="one.categoryId" :class="{ cur: bgcolor === index }" >
      <h3 @mouseenter="changebgcolor(index)" @mouseleave="clearcolor">    如果h3还有同级标签。可将鼠标移出的方法委派给父级标签
            <a href="">{{ one.categoryName }}</a>
       </h3>
  </div>

js

data() {
    return {
      bgcolor: -1,
    };
  },
methods: {
    // 鼠标移动上更换背景色
    changebgcolor(index) {
      // index:鼠标移上的元素的索引值
      this.bgcolor = index;
    },
    //鼠标移出,还原颜色
    clearcolor(){
        this.bgcolor =  -1
    }
  },

css

.cur {
          background-color: skyblue;
     }

 

上一篇:图像处理之浮雕效果


下一篇:Dijkstra的船新写法