css - Vuejs 在 css 中应用循环来放置悬停

Question

在 VueJS 中，我的对象中有具有悬停属性的元素。

所以，我想在样式中添加一个 foreach，但这是不可能的。

我想做那种事:

<style>
  @foreach (element in elements) {    
    if (element.has_backgroundhover) {
        '#'+element.id:hover {
           background : element.background_hover;
        }
    }    
 }
</style>

注意每个元素都有不同的背景颜色(它存储在他的 oibject 属性中)

谢谢

Answer 1

@mouseenter 和@mouseleave 事件监听器将允许将 css 类应用于每个元素。

例如，切换一个定义了背景颜色的 .hovered 类。