Vue iView实现鼠标滑过变更图片

最新推荐文章于 2023-04-11 11:38:12 发布

原创

最新推荐文章于 2023-04-11 11:38:12 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

本文介绍了如何使用Vue iView框架，结合@mouseover和@mouseout事件，实现在鼠标滑过卡片组件(Card)时动态变更图片的效果。

Vue iView实现鼠标滑过变更图片

用的是@mouseover和 @mouseout来变更的还有iview的Card 卡片组件
在这里插入图片描述

<template>
  <Row class="rowItem">
    <Col span="8" v-for="(item,k) in gard1List" :key="k">
      <div @mouseover="ImgchangeOn(k)" @mouseout="ImgchangeOut(k)" class="test">
        <label class="colLabel">
          <img :src="item.active" class="imgItem" ref="we" />
        </label>
        <div class="colDiv">
          <p class="colDiv-title">{
  
  {item.title}}</p>
          <p class="colDiv-text">{
  
  {item.text}}</p>
        </div>
      </div>
    </Col>
  </Row>
</template>