How to stop jquery from overriding CSS color?

Question

I have a table that shows name, rank, and points. Rows change color when I hover over them and When I click on each individual row, it adds the class of 'active'. My CSS rules select the 'active' class to give it a border and new background color. The border works, but the background color doesn't.

I know the jquery is working because when I click on the row, it adds a black border as it should according the CSS rules I set, but the background just turns and stays plain white. I checked firebug too which shows the active class being added to the clicked row but the color still doesn't change. I'm not worried about toggle clicking right now because I just want to get this first step cleared.

I searched a few other older posts that recommended adding !important, but that's not working either.

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


});

The problem is that you try to target .row-data .active when by your code i guess you should be targeting .rank-table .active or .row-data.active — arma
– arma, Commented Oct 22, 2015 at 1:11

Christian · Accepted Answer · 2015-10-22 01:25:59Z

6

Firstly, your .active class doesn't work because you've added a combinator (space) to the selector. .row-data .active means "find all children with the class .active inside .row-data". You'd want .row-data.active to find .row-data with the .active class.

In regards to the rest, Javascript styles are applied inline, which means they override any styles defined in a style tag or external stylesheet - unless you use !important on those rules. Read: CSS Specificity.

Having said that, what you want to do is exactly what CSS classes are for. Create your styles in CSS, and toggle the classes with javascript. You should never set styles with Javascript, especially not if you then have to go and use !important in your stylesheets! There's always a way to do it with 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');
  });
});

edited Oct 22, 2015 at 1:25

answered Oct 22, 2015 at 1:07

Christian

19.8k3 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christian Over a year ago

@KnT88 Awesome, really glad it helped! Brad's answer is even better; there's no need to even use Javascript to bind the mouseenter/mouseleave events (unless you're doing something else in the code). You can just use CSS :hover.

Brad Evans · Accepted Answer · 2015-10-22 01:28:53Z

3

First, set your hover state with CSS. And for the active state you're looking for, simply toggle the class.

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

answered Oct 22, 2015 at 1:28

Brad Evans

7282 gold badges6 silver badges19 bronze badges

4 Comments

Christian Over a year ago

Now I feel silly; of course there's no need to even use Javascript to toggle the highlight class. +1.

Brad Evans Over a year ago

Yeah but you took the time to explain it all out so there's that :)

Brad Evans Over a year ago

Why was my answer down voted? It is the correct answer and it is the best answer.... Can I even find out who down voted it? What a goofy system this is.

Christian Over a year ago

I've got heaps of them mate. Nothing you can do to find out who or why. You're right - if someone wants to downvote, they should be forced to write a comment explaining why.

nbermudezs · Accepted Answer · 2015-10-22 01:07:27Z

2

Your problem is that you are using .css to set the style on mouseover and mouseleave. That causes the css to be inlined in the html in a style="" attribute.

Inline styling has the highest importance so no matter what you set your class to it won't work.

Instead what you should do is to move your css for mouseover and mouseleave into a class and set the classes instead of using .css

answered Oct 22, 2015 at 1:07

nbermudezs

2,8541 gold badge22 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to stop jquery from overriding CSS color?

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related