无法从数据表中删除悬停颜色 header
Can't remove hover color from datatable header
我有一个数据table，我想制作它，如果您将鼠标悬停在数据中的一行上，它会变成一个圆形的灰色框。
我有这个工作，但如果我将鼠标悬停在 table 的第一 header 行上，它也会改变颜色：
我试图通过在我的 css 中添加一个特定的案例来删除它，这样当我将鼠标悬停在该元素上时它不会将颜色更改为灰色，但它不会改变任何东西。
table#tracklistTable tr:hover{
background:rgb(113, 128, 134) !important;
}
thead:hover{
background:none !important;
}
有谁知道当我将鼠标悬停在 table header 上时如何防止它改变颜色？谢谢
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>
继续阅读 how specifity in CSS works.
如果您定义一个带有 id 的选择器，您也必须在覆盖选择器中使用一个 id。
其次，您将样式设置为 tr:hover ，因此如果您想覆盖此样式，您还需要在 thead 部分中定位 tr:hover
table#tracklistTable thead tr:hover{
background:none !important;
}
这行得通！
在 tbody 中添加你的数据行，在你的 css 中像 -
table#tracklistTable tbody tr:hover{
background:rgb(113, 128, 134) !important;
}
为此添加tbody：
table#tracklistTable tbody tr:hover{
background:rgb(113, 128, 134) !important;
}
这将排除 <thead>
下的 <tr> 元素
我有一个数据table，我想制作它，如果您将鼠标悬停在数据中的一行上，它会变成一个圆形的灰色框。
我有这个工作，但如果我将鼠标悬停在 table 的第一 header 行上，它也会改变颜色：
我试图通过在我的 css 中添加一个特定的案例来删除它，这样当我将鼠标悬停在该元素上时它不会将颜色更改为灰色，但它不会改变任何东西。
table#tracklistTable tr:hover{
background:rgb(113, 128, 134) !important;
}
thead:hover{
background:none !important;
}
有谁知道当我将鼠标悬停在 table header 上时如何防止它改变颜色？谢谢
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>
继续阅读 how specifity in CSS works.
如果您定义一个带有 id 的选择器，您也必须在覆盖选择器中使用一个 id。
其次，您将样式设置为 tr:hover ，因此如果您想覆盖此样式，您还需要在 thead 部分中定位 tr:hover
table#tracklistTable thead tr:hover{
background:none !important;
}
这行得通！
在 tbody 中添加你的数据行，在你的 css 中像 -
table#tracklistTable tbody tr:hover{
background:rgb(113, 128, 134) !important;
}
为此添加tbody：
table#tracklistTable tbody tr:hover{
background:rgb(113, 128, 134) !important;
}
这将排除 <thead>
<tr> 元素