时间戳

首页 > 解决方案 > 无法从数据表标题中删除悬停颜色

javascript - 无法从数据表标题中删除悬停颜色

问题描述

我有一个数据表，我想制作它，所以如果你将鼠标悬停在数据中的一行上，它会变成一个圆形的灰色框。

我有这个工作，但如果我将鼠标悬停在表格的第一个标题行上，它也会改变颜色：

期望的结果

我试图通过在我的css中添加一个特定的情况来删除它，这样如果我将鼠标悬停在元素上它不会将颜色变为灰色，但它不会改变任何东西。

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

有谁知道当我将鼠标悬停在表格标题上时如何防止表格标题改变颜色？谢谢

https://jsfiddle.net/martinradio/k1f3rbuh/

$(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>

标签： javascripthtmlcssdatatablehover

解决方案

阅读CSS 中的特殊性是如何工作的。

如果您使用 id 定义选择器，则还必须在覆盖选择器中使用 id。

其次，您将样式设置为tr:hover，因此如果您想覆盖此样式，您还需要tr:hover在您的thead部分中定位

table#tracklistTable   thead tr:hover{
    background:none !important;
}

这会奏效！

推荐阅读