title: Vuetify v-list-item style change on hover
body: <p>I'm new to vuetify.<br/>
  I use Vuetify v-list sample (<a href="https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/lists/intermediate/title-subtitle-actions-and-action-text.vue" rel="nofollow noreferrer">Github</a>)<br/></p>
  
  <p><strong>My v-list:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/ykTIi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ykTIi.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;v-card
      max-width="500"
      class="mx-auto"
    &gt;
      &lt;v-toolbar
        color="pink"
        dark
      &gt;
        &lt;v-app-bar-nav-icon&gt;&lt;/v-app-bar-nav-icon&gt;
  
        &lt;v-toolbar-title&gt;Inbox&lt;/v-toolbar-title&gt;
      &lt;/v-toolbar&gt;
  
      &lt;v-list two-line&gt;
        &lt;v-list-item-group
          v-model="selected"
          multiple
          active-class="pink--text"
        &gt;
          &lt;template v-for="(item, index) in items"&gt;
            &lt;v-list-item :key="item.title"&gt;
              &lt;template v-slot:default="{ active, toggle }"&gt;
                &lt;v-list-item-content&gt;
                  &lt;v-list-item-title v-text="item.title"&gt;&lt;/v-list-item-title&gt;
                  &lt;v-list-item-subtitle class="text--primary" v-text="item.headline"&gt;&lt;/v-list-item-subtitle&gt;
                  &lt;v-list-item-subtitle v-text="item.subtitle"&gt;&lt;/v-list-item-subtitle&gt;
                &lt;/v-list-item-content&gt;
  
                &lt;v-list-item-action&gt;
                  &lt;v-list-item-action-text v-text="item.action"&gt;&lt;/v-list-item-action-text&gt;
                &lt;/v-list-item-action&gt;
              &lt;/template&gt;
            &lt;/v-list-item&gt;
  
            &lt;v-divider
              v-if="index + 1 &lt; items.length"
              :key="index"
            &gt;&lt;/v-divider&gt;
          &lt;/template&gt;
        &lt;/v-list-item-group&gt;
      &lt;/v-list&gt;
    &lt;/v-card&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data: () =&gt; ({
        selected: [2],
        items: [
          {
            action: '15 min',
            headline: 'Brunch this weekend?',
            title: 'Ali Connors',
            subtitle: "I'll be in your neighborhood doing errands this weekend. Do you want to hang out?",
          },
          {
            action: '2 hr',
            headline: 'Summer BBQ',
            title: 'me, Scrott, Jennifer',
            subtitle: "Wish I could come, but I'm out of town this weekend.",
          },
          {
            action: '6 hr',
            headline: 'Oui oui',
            title: 'Sandra Adams',
            subtitle: 'Do you have Paris recommendations? Have you ever been?',
          },
          {
            action: '12 hr',
            headline: 'Birthday gift',
            title: 'Trevor Hansen',
            subtitle: 'Have any ideas about what we should get Heidi for her birthday?',
          },
          {
            action: '18hr',
            headline: 'Recipe to try',
            title: 'Britta Holt',
            subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
          },
        ],
      }),
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>I want when I hover on each v-list-item, A light white background with some shadow a button in it's center to be appeared. (I made this hover concept in Photoshop):</p>
  
  <p><a href="https://i.stack.imgur.com/hqvm9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hqvm9.jpg" alt="enter image description here"></a></p>
  
  <p>Should I use v-hover component? And what style should I use?</p>
  
  <p>Thanks.</p>