vue v-for实现hover效果,点击效果

关注

转载最新推荐文章于 2026-06-08 07:31:50 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

【hover隐藏·HTML元素】 CSS 中的 hover 状态可以在用户鼠标悬停在元素上时触发特定样式。一、定义一个 CSS 类我们需要定义一个 CSS 类，让它能够隐藏元素。可以通过设置元素的 display 属性为 none 来实现。阅读详情


<template>

    <ul class="item">

        <li v-for="(item, index) in Arr" :key="index"

            :class="{'hoverBg':index==hoverIndex}"

            @mouseover="hoverIndex = index"

            @mouseout="hoverIndex = -1">

            {{item}}

        </li>

    </ul>

</template>

<script>

export default {

    data: function(){

        return {

             Arr:['A','B','C','D'],

            hoverIndex: -1, //表示当前hover的是第几个li 初始为 -1 或 null 不能为0 0表示第一个li

        }

    },

}

</script>

<style>

.item{

    width: 600px;

    height: 60px;

}

.item li{

    width: 80px;

    height: 60px;

    line-height: 60px;

    margin-left: 20px;

    float: left;

    text-align: center;

    cursor: pointer;

}

.hoverBg{

    background: #ccc;

    color: #fff;

}

.clickBg{

    background: red;

    color: #fff;

}

</style>