jquery - 如何阻止 jquery 覆盖 CSS 颜色？

Question

我有一个显示姓名、排名和分数的表格。当我将鼠标悬停在行上时，行会改变颜色，当我单击每一行时，它会添加“事件”类。我的 CSS 规则选择 'active' 类来给它一个边框和新的背景颜色。边框有效，但背景颜色无效。

我知道 jquery 正在工作，因为当我单击该行时，它会根据我设置的 CSS 规则添加一个黑色边框，但背景只是变成并保持纯白色。我也检查了 Firebug ，它显示事件类被添加到单击的行但颜色仍然没有改变。我现在不担心切换点击，因为我只想清除第一步。

我搜索了一些建议添加 !important 的其他旧帖子，但这也不起作用。

HTML

  <tr class="row-data">
    <td class="name">player</td>
    <td class="points">points</td>
    <td class="rank"><p id="rank">Rank1</p></td>
  </tr>

CSS

  .row-data .active {
  border: 2px solid black;
  background-color: red !important;

查询

$(function() {
var limegreen = '#73f302';
var white2 = '#eef4cc';
var transitionTime = '0.5s'

var $rankTable = $('.rank-table');
var $rowData = $rankTable.find('.row-data');

function rowHighlight() {
  var rowID = $(this)

  rowID.css({
    'background-color': limegreen,
    'transition-property': 'background-color',
    'transition-duration': transitionTime,
  });
};
function rowDelight() {
  var rowID = $(this)
  rowID.css({
    'background-color': white2,
    'transition-property': 'background-color',
    'transition-duration': transitionTime,
  });
};

function activeToggle() {
  var activeID = $(this)

  activeID.addClass('active')
};

$rowData.on('mouseover', rowHighlight);
$rowData.on('mouseleave', rowDelight);
$rowData.on('click', activeToggle);


});

Answer 1

首先，您的 .active 类不起作用，因为您向选择器添加了一个组合符(空格)。 .row-data .active 表示“在 .row-data 中找到所有具有 .active 类的 child ”。您希望 .row-data.active 找到具有 .active 类的 .row-data。

关于其余部分，Javascript 样式是内联应用的，这意味着它们会覆盖样式标签或外部样式表中定义的任何样式 - 除非您在这些规则上使用 !important。阅读:CSS Specificity .

话虽如此，您要做的是正是CSS 类的用途。在 CSS 中创建样式，并使用 javascript 切换类。您永远不应该使用 Javascript 设置样式，尤其是如果您随后必须在样式表中使用 !important 时更不要这样做!总有一种方法可以用 CSS 实现。

CSS:

.row-data {
  transition: background-color .5s;
}

.row-data.active {
  border: 2px solid black;
  background-color: red;
}

.row-data.highlight {
  background-color: #73f302;
}

JS:

$(function() {
  var $rankTable = $('.rank-table');
  var $rowData = $rankTable.find('.row-data');

  $rowData.on('mouseenter', function() {
    $(this).addClass('highlight');
  });

  $rowData.on('mouseleave', function() {
    $(this).removeClass('highlight');
  });

  $rowData.on('click', function() {
    $(this).toggleClass('active');
  });
});