如何阻止jquery覆盖CSS颜色？

Question

我有一张表格,显示姓名,等级和积分.当我将鼠标悬停在它们上时行会改变颜色,当我单击每一行时,它会添加"活动"类.我的CSS规则选择"活动"类,为其提供边框和新的背景颜色.边框有效,但背景颜色没有.

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

我搜索了一些其他推荐添加的旧帖子!重要,但这也没有用.

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;

}

jQuery的

$(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意思是"找到该类的所有孩子.active里面.row-data".你想.row-data.active找到.row-data这个.active班级.

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

话虽如此,你想要做的正是 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');
  });
});