如何防止jQuery覆盖CSS颜色？

Question

如何防止jQuery覆盖CSS颜色？

4

我有一个表格，其中显示了姓名、职级和积分。当我将鼠标悬停在行上时，它们的颜色会改变。点击单个行时，它会添加'class'类。我的CSS规则选择'active'类以给它一个边框和新的背景颜色。虽然边框可以正常工作，但是背景颜色却没有改变。

我知道jQuery可以正常工作，因为当我点击行时，它会按照我设置的CSS规则添加黑色边框，但是背景颜色却一直保持为白色。我还查看了Firebug，它显示添加到已点击行的'active'类，但颜色仍然没有改变。我现在不担心切换点击，因为我只想清除这个第一步。

我搜索了一些旧帖子，建议添加'!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;

}

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);


});

- Kyle Truong

1

问题在于你尝试定位 .row-data .active，但根据你的代码猜测，你应该定位 .rank-table .active 或 .row-data.active。 - arma

3个回答

3

首先，使用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');
  });
})

- Brad Evans

现在我感到有点儿傻；当然，甚至不需要使用Javascript来切换highlight类。+1。 - Christian

1

是的，但你花时间将所有内容都解释清楚了，所以这很重要 :) - Brad Evans

为什么我的答案被踩了？它是正确的，也是最好的答案... 我能知道是谁踩了它吗？这个系统真是太荒谬了。 - Brad Evans

我有很多这样的人。你无法找出是谁或为什么。你说得对 - 如果有人想要踩，他们应该被强制写下解释原因的评论。 - Christian

2

你的问题在于你使用 .css 来设置鼠标悬停和离开时的样式。这会导致 CSS 在 HTML 中被嵌入到 style="" 属性中。

内联样式具有最高的优先级，因此无论你将类设置为什么，它都不起作用。

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

- nbermudezs

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christian · Accepted Answer

首先，你的.active类不起作用，因为你在选择器中添加了一个组合器（空格）。.row-data .active的意思是“查找所有带有.active类的子元素在.row-data内”。你需要使用.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');
  });
});