问无法从datatable标题中删除悬停颜色

EN

    table#tracklistTable tr:hover{
        background:rgb(113, 128, 134) !important;
    }
    
    
    thead:hover{
        background:none !important;
    }

$(document).ready(function() {
  initializeDatatable()
});

async function initializeDatatable() {
  var dataSet = [
    ["1", "song title 1", "FRANCHISE (feat Young)", "2 days ago", "3:22"],
    ["2", "song title 2", "FRANCHISE (feat Young)", "45 minuts ago", "1:22"],
    ["3", "song title 3", "FRANCHISE (feat Young)", "4 minutes ago", "0:21"],
    ["4", "song title 4", "FRANCHISE (feat Young)", "8 weeks ago", "11:21"],
  ];
  $('#tracklistTable').DataTable({
    data: dataSet,
    "searching": false, // Search Box will Be Disabled
    "info": false, // Will show "1 to n of n entries" Text at bottom
    "lengthChange": false, // Will Disabled Record number per page,
    "bPaginate": false, // Disable pagination "page 1 out of x"
    columns: [{
        title: "#"
      },
      {
        title: "TITLE"
      },
      {
        title: "ALBUM"
      },
      {
        title: "DATE ADDED"
      },
      {
        title: "TIME"
      }
    ]
  });
}

//call this function to update the artist display UI
async function updateArtistDisplay(imgURL, artistName) {
  return new Promise(async function(resolve, reject) {
    //get colors for image
    let imageColors = await getImageColors(imgURL)
    console.log(imageColors)
    //update image html element
    document.getElementsByClassName('album-art')[0].src = imgURL;
    //get light vibrant hex
    let VibrantHex = imageColors['Vibrant'].hex
    //get 50% lighter version of Vibrant
    let brighterVibrant = ColorLuminance(`${VibrantHex.replace('#', '')}`, 0.5);
    //update header css gradient 
    document.getElementsByClassName('header-row')[0].style.background = `linear-gradient(0deg, rgb(18,18,18) -86%, ${brighterVibrant})`;
    //get 60% darker version of Vibrant
    let darkerVibrant = ColorLuminance(`${VibrantHex.replace('#', '')}`, -0.6);
    //update body css gradient
    document.getElementsByClassName('body-row')[0].style.background = `linear-gradient(180deg, ${darkerVibrant}, rgb(18,18,18))`;

    resolve("")
  })
}

//lighten or darken a hex color
function ColorLuminance(hex, lum) {

  // validate hex string
  hex = String(hex).replace(/[^0-9a-f]/gi, '');
  if (hex.length < 6) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  lum = lum || 0;

  // convert to decimal and change luminosity
  var rgb = "#",
    c, i;
  for (i = 0; i < 3; i++) {
    c = parseInt(hex.substr(i * 2, 2), 16);
    c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
    rgb += ("00" + c).substr(c.length);
  }

  return rgb;
}

//send image url to backend, get back color swatches (name, rgb, hex)
async function getImageColors(imgURL) {
  return new Promise(function(resolve, reject) {
    $.ajax({
      type: 'POST',
      url: '/getImageColors',
      data: {
        imgURL: imgURL
      },
    }).then((resp) => {


      //for each color, create div and display on page
      let htmlStr = ``;
      for (const [key, value] of Object.entries(resp)) {
        htmlStr = `${htmlStr} <br> <div style="background:${value.hex}; width=200px;height=200px;">${key} ${value.hex}</div>`
      }
      document.getElementById('debug-color-box').innerHTML = htmlStr;

      //calculate 50% darker version of LightVibrant
      //let darkerLightVibrant = ColorLuminance(`${resp['LightVibrant'].hex.replace('#','')}`, -0.5);


      resolve(resp)
    }).catch((err) => {
      console.log('getImageColors() err = ', err)
      reject(err)
    });
  });
}

@font-face {
  font-family: SpotifyCircularThin;
  src: url("/static/assets/fonts/AvenirLTStd-Book.otf") format("opentype");
}

@font-face {
  font-family: SpotifyCircular;
  src: url("/static/assets/fonts/AvenirLTStd-Black.otf") format("opentype");
}

table {
  font-family: SpotifyCircularThin !important;
}


/* border-bottom: 0.1px solid rgb(179, 179, 179); */

table.dataTable thead th {
  color: rgb(220, 217, 217);
}

td:first-child {
  -moz-border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px 0 0 10px;
}

td:last-child {
  -moz-border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
}

table#tracklistTable tr:hover {
  background: rgb(113, 128, 134) !important;
}


/*
    thead:hover{
        background:none !important;
    }
    */

tbody tr {
  height: 55px !important;
}


/* tracklist table header bottom line */

table.dataTable thead th {
  border-bottom: 1px solid rgb(220, 217, 217);
}

table.dataTable tfoot th {
  border-top: 0;
}

#tracklistTable_wrapper {
  width: 100% !important;
}

#tracklistTable {
  color: white;
  width: 100%;
  padding-top: 50px;
  padding-left: 40px !important;
  padding-right: 40px !important;
}

table.dataTable.no-footer {
  border-bottom: 0 !important;
}

td {
  background: transparent !important
}

tr {
  background: transparent !important;
}

body {
  font-family: 'SpotifyCircular';
}

.container {
  max-width: 100%;
}

.header-row {
  background: linear-gradient(0deg, rgb(18, 18, 18) -86%, rgb(106, 174, 212));
  padding: 50px;
}

.body-row {
  /* gradient from dark version of Light Vibrant to spotify grey*/
  background: linear-gradient(#4c6c7e, rgb(18, 18, 18));
  height: 100%;
}

.album-art {
  /* box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]; */
  box-shadow: 0px 0px 100px -23px rgb(18, 18, 18);
}

@import url(//db.onlinewebfonts.com/c/01173b246d9d9ea808ea75a26b3b61bb?family=Circular+Spotify+Tx+T+Black);
@font-face {
  font-family: "Circular Spotify Tx T Black";
  src: url("//db.onlinewebfonts.com/t/01173b246d9d9ea808ea75a26b3b61bb.eot");
  src: url("//db.onlinewebfonts.com/t/01173b246d9d9ea808ea75a26b3b61bb.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/01173b246d9d9ea808ea75a26b3b61bb.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/01173b246d9d9ea808ea75a26b3b61bb.woff") format("woff"), url("//db.onlinewebfonts.com/t/01173b246d9d9ea808ea75a26b3b61bb.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/01173b246d9d9ea808ea75a26b3b61bb.svg#Circular Spotify Tx T Black") format("svg");
}

.album-text {
  color: white;
  margin-top: 50px;
  padding-left: 10px;
  position: absolute;
  padding-left: 230px;
}

.artist-heading-text {
  font-size: 60px;
}

<head>
  <!-- jQuery CDN - Slim version (=without AJAX) -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <!-- Popper.JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>

  <!-- Bootstrap JS -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

  <!-- bootstrap css-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  <!-- jQuery  -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <!-- font-awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- datatables css -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.1/datatables.min.css" />

  <!-- datatables js -->
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.1/datatables.min.js"></script>


</head>

<div class="container">

  <div class="row header-row">

    <div class="container-fluid">
      <div class="row">
        <div class="col-md-3">

          <img src="https://preview.redd.it/2qj2f97pnko51.jpg?auto=webp&s=178262420f562a2334461d8d9370ad8122446326" class="img-responsive album-art" alt="Some picture" width="200px" height="200px">

        </div>
        <div class="album-text col-md-9">
          <h1 class="artist-heading-text">time to code</h1>
          <p>Your Information.</p>
        </div>
      </div>
    </div>


  </div>

  <div class="row body-row">

    <table id="tracklistTable" class=""></table>

  </div>

  <div id='debug-color-box'></div>


</div>