Question

我有一张表格，显示姓名，等级和积分。当我将鼠标悬停在它们上时行会改变颜色，当我单击每一行时，它会添加“活动”类。我的CSS规则选择了“活跃的”＃39;给它一个边框和新的背景颜色的类。边框有效，但背景颜色没有。

我知道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表示＆＃34;在.active＆＃34;内找到所有与.row-data班级相关的孩子。您希望.row-data.active找到.row-data类的.active。

就其余部分而言，Javascript样式是内联应用的，这意味着它们会覆盖样式标记或外部样式表中定义的任何样式 - 除非您对这些规则使用!important。阅读：CSS Specificity。

话虽如此，你想要做的是完全 CSS类的用途。在CSS中创建样式，并使用javascript切换类。如果您必须在样式表中使用!important，则不应使用Javascript，尤其设置样式！总有办法用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');
  });
});

Answer 2

首先，使用CSS设置悬停状态。对于你正在寻找的活跃状态，只需切换课程。

fiddle

HTML

<body>
  <table>
    <tr class="row-data">
      <td class="name">bob</td>
      <td class="points">12 points</td>
      <td class="rank">
        <p>Rank1</p>
      </td>
    </tr>
    <tr class='row-data'>
      <td class="name">bill</td>
      <td class="points">6 points</td>
      <td class="rank">
        <p>Rank2</p>
      </td>
    </tr>
  </table>
</body>

CSS

table{
  border-collapse: collapse;
}

.row-data:hover{
  background-color: lightgray;
}

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

的jQuery

$(function() {
  $('.row-data').on('click', function() {
      $(this).toggleClass('active');
  });
})

Answer 3

您的问题是您使用.css在鼠标悬停和鼠标移动时设置样式。这导致css在style=""属性的html中内联。

内联样式具有最高的重要性，因此无论您将课程设置为什么，它都不会起作用。

相反，你应该做的是将mouseover和mouseleave的css移到一个类中并设置类而不是使用.css

如何阻止jquery覆盖CSS颜色？

3 个答案: