title: Vuetify.js: set CSS class on mouse hover event using v-hover component
body: <p>I am trying to change the class to apply on a Vuetify.js component based on whether there is a mouse hover or not:</p>
  
  <pre><code>&lt;v-card
      class="mx-auto"
      width="344"
    &gt;
      &lt;v-hover&gt;
      &lt;v-card-title
        slot-scope="hover"
        :class="`${hover? class1: class2}`"&gt;
        &lt;div&gt;
          &lt;span class="headline"&gt;Hover&lt;/span&gt;              
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/v-card-title&gt;
      &lt;/v-hover&gt;
    &lt;/v-card&gt;
  </code></pre>
  
  <p>The CSS classes simply set the <code>background-color</code> property:</p>
  
  <pre><code>.class1 {
    background-color:red;
  }
  
  .class2 {
    background-color:blue;
  }
  </code></pre>
  
  <p>For some reason, this is not working. What am I missing?</p>
  
  <p><a href="https://codepen.io/begueradj/pen/mQEybj" rel="noreferrer"><strong>Codepen.</strong></a></p>