[Vuejs]-How to change backgound image when hovering over elements with Vue.js?

by

0👍

✅

It shows a string because you’re just outputting the value of hover ({{ hover }}) in the div. If you want to show an image you should use an img tag or the background-image css property.

With VueJS you can bind inline style to a div like this:

<div v-bind:style="{ 'background-image': 'url(' + hover + ')' }"

Binding inline Styles – VueJS Documentation

0👍

You can solve this easily with CSS, just create a class for each image background and put it directly in <router-link class="..." ...> (no need for <router-link> inside an <a> element).

Here’s a pure-HTML example:

<html>
  <head>
    <style>
     .btn {
         font-size: 1rem;
         background-color: #fff;
         cursor: pointer;
         padding: 2rem 4rem;
     }

     .btn:hover {
         background-image: url(https://picsum.photos/200);
         color: #fff;
     }
    </style>
  </head>

  <body>
    <button class="btn">
      Hover Me
    </button>
  </body>

</html>

Leave a comment