悬停效果vue js [关闭]答案

【问题标题】：Hover effect vue js [closed]悬停效果vue js [关闭]
【发布时间】：2020-05-28 03:24:16
【问题描述】：

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

我正在使用 v-for 渲染此内容，并且我希望对单个 Topic

有 hover 效果ONLY

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

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

我在@mouseleave 和@mouseover 上使用了一个方法来触发一个函数。我总是可以将:key 传递给该方法，但我不知道如何定位使用函数内的 key 仅将 CSS 应用于该单个主题。

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

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

【问题讨论】：

你不能只使用 CSS :hover 吗？例如，将.topic.hover 替换为.topic:hover
天哪。这是基本的CSS。我真蠢。我的大脑深深陷入了 vue，以至于我忘记了基本的 css。谢谢！

标签： javascript css vue.js

【解决方案1】：

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

<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'">

【讨论】：

@Shu Pesmerga 查看此答案。希望对您有所帮助！
谢谢！我现在明白了。是否使用三元运算符返回类。完全忘记了这个功能。