Блог

У меня есть этот vue, который отображает список фруктов, используя v-for . При наведении курсора мыши класс css hovering применяется ко всем элементам, а не только к одному элементу. Как мне исправить это в классе css hovering , чтобы применить только к элементу, на который я наведу курсор мыши?

 new Vue({
  el: '#app',
  data: {
    fruits: ['apple','kiwi', 'orange'],
    isHovering: false
  }
}) 

 .hovering{
  color: red
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="fruit in fruits" @mouseover="isHovering = true" 
      @mouseout="isHovering = false" 
      :class="{hovering: isHovering}">
     {{ fruit }}
    </li>
  </ul>  
</div> 

Удалите «:class=»{hovering: isHovering}»» и используйте вместо этого обычный псевдокласс CSS «: hover», например:

 <template>
<div id="app">
    <ul>
      <li v-for="fruit in fruits" class="hover" :key="fruit" @mouseover="isHovering = true" 
        @mouseout="isHovering = false" >
      {{ fruit }}
      </li>
    </ul> 
  </div>
</template>
 

 new Vue({
  el: '#app',
  data: {
    fruits: ['apple','kiwi', 'orange'],
    isHovering: false
  }
})
 

 <style>
.hover:hover{
  color: red
}

</style>