时间戳

首页 > 解决方案 > 悬停效果vue js

javascript - 悬停效果vue js

问题描述

我在我的 vuejs UI 中遇到了一个有趣的问题。

我正在使用它进行渲染，v-for并且我只想为单个主题设置悬停效果

徘徊

但发生的情况是列表中的所有项目都获得了悬停效果，而不仅仅是单个主题。

在此处输入图像描述

如何定位或获取列表中的特定主题？

我使用一个方法@mouseleave来@mouseover触发一个函数。我总是可以将 传递:key给该方法，但我不知道如何定位使用函数内的键仅将 CSS 应用于该单个主题。 在此处输入图像描述

发生这种情况是因为列表中的所有项目都依赖于单个数据源。

在此处输入图像描述

如何仅将类/样式或 CSS 应用于该特定主题？

标签： javascriptcssvue.js

解决方案

设置和重置悬停的主题 ID，@mouseover如下@mouseleave所示：

<div @mouseover = "hoverToggle(subject.id, 'mouseOver')"
     @mouseleave = "hoverToggle(subject.id, 'mouseLeave')">

在函数中进行如下更改：

hoverToggle = function(subjectId, action){
    switch(action){
        case 'mouseOver':
            this.hoveredSubjectId = subjectId;
        case 'mouseLeave':
            this.hoveredSubjectId = "";
    }
}

为您添加动态类，div如下所示：

<div class="(subject.id === hoveredSubjectId) ? 'hover':'no-hover'">

推荐阅读