Utilizing CSS and Vue to dynamically style elements based on hover events for rating displays

Question

Utilizing CSS and Vue to dynamically style elements based on hover events for rating displays

Looking for a simple solution here. I'm working on coding a 5-star rating system.

I have an array set up with 5 possible ratings:

const ratingsArray = [
  {
    name: 'rating1',
    ratingValue: 20,
    isEnabled: ref(false)
  },
  {
    name: 'rating2',
    ratingValue: 40,
    isEnabled: ref(false)
  },
  {
    name: 'rating3',
    ratingValue: 60,
    isEnabled: ref(false)
  },
  {
    name: 'rating4',
    ratingValue: 80,
    isEnabled: ref(false)
  },
  {
    name: 'rating5',
    ratingValue: 100,
    isEnabled: ref(false)
  },
]

This template loops through the array and displays a circle for each entry:

The class 'ratingBoxChecked' is applied to fill the dot with color.

<template>
  <span>
    <div 
      v-for="(rating, index) in ratingsArray" 
      :key="rating.name" 
      @click="updateRating(index, rating.ratingValue)" 
      :class="[rating.isEnabled.value ? 'ratingBoxChecked' : 'ratingBox']">
    </div>
  </span>
</template>

Is there a way to hover over one dot and have the previous ones hovered as well all with the class 'ratingBoxChecked'?

For instance, if I hover over the 3rd dot, I want the first 2 dots to also be enabled! Just like a typical star rating hover effect.

Appreciate any help you can provide!

css vue.js hover rating

Answer 1

Answer №1

Disregarding the "click" scenario in this instance (though it can easily be incorporated) - take a look at my StackBlitz to see it in action.

Program Code

<script setup>
import { ref } from 'vue';

const ratings = [
  {
    name: 'rating1',
    value: 20,
  },
  {
    name: 'rating2',
    value: 40,
  },
  {
    name: 'rating3',
    value: 60,
  },
];

// When hovering, this ref will be changed to the index of the rating you hover over
const hoveredRating = ref(-1);
// Function to check if styles/text/... should be changed
const shouldRatingShow = (index) => hoveredRating.value >= index;

// Note: This is a naive implementation. You can also check it based on names (e.g. find the index of a rating based on the name and take all before) and so on and so on
</script>

<template>
  <span>
    <!-- div containing the mouseenter and mouseleave event to change the ref. PS: If you want to make it clickable, this should be a button!! -->
    <div
      v-for="(rating, index) in ratings"
      :key="rating.name"
      @mouseenter="hoveredRating = index"
      @mouseleave="hoveredRating = -1"
    >
      {{ rating.name }}
      {{ shouldRatingShow(index) ? 'on' : 'off' }}
    </div>
  </span>

  <!-- Debug output -->
  {{ hoveredRating }}
</template>

Answer 2

Disregarding the "click" scenario in this instance (though it can easily be incorporated) - take a look at my StackBlitz to see it in action.

Program Code

<script setup>
import { ref } from 'vue';

const ratings = [
  {
    name: 'rating1',
    value: 20,
  },
  {
    name: 'rating2',
    value: 40,
  },
  {
    name: 'rating3',
    value: 60,
  },
];

// When hovering, this ref will be changed to the index of the rating you hover over
const hoveredRating = ref(-1);
// Function to check if styles/text/... should be changed
const shouldRatingShow = (index) => hoveredRating.value >= index;

// Note: This is a naive implementation. You can also check it based on names (e.g. find the index of a rating based on the name and take all before) and so on and so on
</script>

<template>
  <span>
    <!-- div containing the mouseenter and mouseleave event to change the ref. PS: If you want to make it clickable, this should be a button!! -->
    <div
      v-for="(rating, index) in ratings"
      :key="rating.name"
      @mouseenter="hoveredRating = index"
      @mouseleave="hoveredRating = -1"
    >
      {{ rating.name }}
      {{ shouldRatingShow(index) ? 'on' : 'off' }}
    </div>
  </span>

  <!-- Debug output -->
  {{ hoveredRating }}
</template>

Utilizing CSS and Vue to dynamically style elements based on hover events for rating displays

Answer №1

Program Code

Similar questions

Vertically align all items within the div using Bootstrap to achieve perfect centering

Locate button elements with the class "button" that do not have any images inside them

As I iterate through my array using v-for, I aim to assign each item to a distinct grid location. Can you provide guidance on achieving this?

Having difficulty adding a border to the SlidesJS frame

What is the method for dynamically invoking computed props in templates?

What is the reason for the disparity between CSS box-sizing content-box and border-box?

Tips for adjusting text placement within table cells without altering the original dimensions of the td element?

What is preventing me from invoking the function that I built using the Function() constructor?

Row-eq-height does not function properly with the layout of my webpage when trying to bootstrap equal column heights

The absence of underlines for <a href> and <u> is causing an issue

Apply Class According to Style Property

Updating charts from the parent component in Vue 3 using Vue-ChartJS version 5.2: A comprehensive guide

Tips for avoiding Navbar dropdowns covering other content

Setting multiple positions for jQueryUI tooltips based on specific classes

Unable to scroll horizontally beyond 200 viewport widths

What is the best way to retrieve the unique identifier of dynamically created divs and showcase a message based on that identifier?

Tips for executing a function whenever unfamiliar anchor elements are selected in Vue.js 3

Developing visually appealing HTML tables with CSS styles

Arranging content within columns according to their column position

Generate two separate CSS files (Mobile and Desktop versions) by compiling a Stylus (.styl) file using Node.js