Vuejs apply loop in css to put hover

Question

In VueJS, I have elements that have hover property in my object.

So, I want to put a foreach in style, but it is not possible.

I want to do that kind of thing :

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

Notice that each element has a background color different (it is stored in his oibject property)

Thank you

You can't do that with CSS, since the element's background color is set at runtime while the CSS is compiled at build time. What you want is to bind `mouseenter` and `mouseleave` events, and set the background color using `Element.style` API instead. [Can you share a minimal, concrete and verifiable example?](https://stackoverflow.com/help/mcve) — Terry, Feb 25 '19 at 10:13

score 1 · Answer 1 · answered Feb 25 '19 at 10:00

1

The @mouseenter and @mouseleave event listeners would allow for css classes to be applied to each element.

For example, toggle a .hovered class that has the background color defined.

answered Feb 25 '19 at 10:00

Brian Lee

17,904
3
41
52

but my color are in a variable, each element has it own background in variable – Amine Haroun Feb 25 '19 at 10:03

score -1 · Accepted Answer · answered Feb 25 '19 at 10:20

-1

Something like this? The HTML:

    <div id="app">
      <div 
        v-for="element of elements"
        @mouseenter="element.hover=true"
        @mouseleave="element.hover=false"
        :style="{
          background: element.hover? element.background_hover : element.background
        }"
      >{{element.name}}</div>
    </div>

And the JS:

    new Vue({
      el: "#app",
      data: {
        elements:[
          {
            name:"element1", 
            background:"#f8f", 
            background_hover:"#a4a",
            hover:false
          },
          {
            name:"element2", 
            background:"#ff8", 
            background_hover:"#aa4",
            hover:false
          },
        ]
      },
    })

This is not using the CSS, rather using events as suggested by @DigitalDrifter. I think the point is that reactive css is not a good idea, and not supported in vue. Instead you need to have the HTML element properties dependent on your vue data object. A fiddle for this is: https://jsfiddle.net/edzaokum/

answered Feb 25 '19 at 10:20

Euan Smith

2,102
1
16
26

thank you, just a question, why using "mouseenter" not "mouseover" ? – Amine Haroun Feb 25 '19 at 10:45
see the mdn documentation for mouseover: https://developer.mozilla.org/en-US/docs/Web/Events/mouseover. Basically mouseenter happens once, mouseover can happen many times while the cursor is moving over the target. The property only needs be changed once. – Euan Smith Feb 25 '19 at 11:17
thanx a lot my friend :) – Amine Haroun Feb 25 '19 at 12:18
what about setting color to :before changing color on hover to the :before (color are also in properties of the element) – Amine Haroun Feb 25 '19 at 12:26
:before is a css selector, not css styling. This can't be changed by vue in this way. IF you have a restricted number of colours you want to apply THEN you could do all of this with classes. i.e. have a `.bluehover:hover:before {background:blue} .redhover ...` (as well as other colours) and then get vue to add a css style depending on the colour `:class="element.background_hover+'hover'"` and here `background_hover` would be one of your list of colours. If you want to appy ANY colour then this does not work and you need to use the solution above. – Euan Smith Feb 25 '19 at 13:44
This is another question : each element has :before on it's
and each element has a different color for that :before on hover..... for exemple : `elemnt 1 : background_color_before : red, background_color_hover_before : blue` .... what can i do for setting different background color to :before with mouseover ?
– Amine Haroun Feb 25 '19 at 13:54
and BTW ensure in the css you put `:hover` before `::before` - pseudo-elements must come after a pseudo-class (see https://stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter) – Euan Smith Feb 25 '19 at 14:41
This demonstrates the use of classes with hover and before. (a re-creation of a previous comment, as something seemed to go wrong with saving it before): https://jsfiddle.net/te1gLvo8/ – Euan Smith Feb 25 '19 at 14:44
thank you, but I'm talking about changing :bufore background color (setting color from object property to :before on hover) – Amine Haroun Feb 25 '19 at 14:59
You can only change pseudo-elements by adding or removing classes from the related HTML element. If that does not do what you want, then you need to add real HTML instead. – Euan Smith Feb 25 '19 at 15:24

Vuejs apply loop in css to put hover

2 Answers2