title: Change background-color on hover for v-data-table
body: <p>I have a v-data-table with 5 columns and I'd like to change the color when the user hovers one line. Does anyone know how to do it ? Right now, the whole table is in dark grey and the hover is a ligh grey, I'd like the hover color to be orange.</p>
  <pre><code>&lt;v-data-table
    :loading=&quot;enableLoadingCircle&quot;
    :footer-props=&quot;{ 'items-per-page-options': [50, 100, 250, -1] }&quot;
    dense
    dark
    :fixed-header=&quot;fixedHeader&quot;
    calculate-widths
    :height=&quot;windowSize.y - 63 - 60&quot;
    :headers=&quot;headers&quot;
    :items=&quot;res&quot;
    class=&quot;elevation-0&quot;
    sort-by=&quot;publicationDate&quot;
    :sortDesc= &quot;sortVal&quot;
    :no-data-text=&quot;loadingMessage&quot;
    :loading-text=&quot;loadingMessage&quot;
  &gt;
    &lt;v-progress-linear slot=&quot;progress&quot;
      v-if=&quot;enableLoadingCircle == true&quot;
      height=&quot;3&quot;
      indeterminate
      :color=yellow
    &gt;&lt;/v-progress-linear&gt;
  
    &lt;!-- VIDEO column --&gt;
    &lt;template #item.video=&quot;{ item }&quot;&gt;
      &lt;a
        target=&quot;_blank&quot;
        v-if=&quot;item.video != ''&quot;
        :href=&quot;item.video&quot;
      &gt;
        &lt;v-btn dark icon&gt;
          &lt;v-icon&gt;
            mdi-movie
          &lt;/v-icon&gt;
        &lt;/v-btn&gt;
      &lt;/a&gt;
    &lt;/template&gt;
    &lt;!-- TITLE column --&gt;
    &lt;template #item.title2=&quot;{ item }&quot;&gt;
      &lt;a
        target=&quot;_blank&quot;
        v-if=&quot;item.file != ''&quot;
        :href=&quot;item.file&quot;
      &gt;
        &lt;span&gt;
          {{ item.title }}
        &lt;/span&gt;
      &lt;/a&gt;
    &lt;/template&gt;
  &lt;/v-data-table&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/f5Gh8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f5Gh8.png" alt="Here's what it looks like" /></a></p>