How to stop jquery from overriding CSS color?

423
November 22, 2016, at 4:36 PM

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

});
Answer 1

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

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

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

Rent Charter Buses Company
READ ALSO
React checkbox boolean value in ajax put request / Rails

React checkbox boolean value in ajax put request / Rails

This is my first foray into React. .

452
How to return a selected value from a database collection in Rails?

How to return a selected value from a database collection in Rails?

So I have a database collection labeled @joe, and I am trying to pass the id variable into a link url path. This is in my index.

386
Wordpress PHP Dropdown Filter (2x) With Single Ajax Request

Wordpress PHP Dropdown Filter (2x) With Single Ajax Request

I've searched a lot for some direction int his project and even thought I found similar cases, I couldn't find something helpful enough to help me understand this issue. [nnn]I started working in a custom filter for wp_Query, one for an specific custom...

334
Multiple Forms with common JS validation

Multiple Forms with common JS validation

I'm a newbie to Javascript and jQuery. All I got was this JS function to validate my form.

259