How to stop jquery from overriding CSS color?


Tags: jquery,html,css,colors

Problem :

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


});


Solution :

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

    CSS Howto..

    How do I get two adjacent spans to display their text vertically?

    How can I set a height, or allow a div to extend to the height of absolutely position elements within?

    How to dynamically change the color of the selected menu item of a web page?

    how to change the position of these links within div header

    How to elasticity of the char length in javascript or css? [duplicate]

    How to reset css before repeating sequence

    How to scroll draw each SVG path one at a time (chronologically)?

    How to disable correctly CSS3 transition property when needed

    How to not lose the css while appending html to an element?

    how to edit the width of menu bar in dreamweaver

    How to add external CSS to HTML 'style'

    How to create a circumference with CSS? [closed]

    How to move a span to a different position in a DIV

    How to make gutter between columns in a CSS grid system

    How to include css file in a JavaFx Spring application

    How to make the height of a div within a master page expand in a content page?

    how to middle vertical-align using bootstrap input-group

    PHP & CSS: How to get hover effect for each row of a table?

    show div and execute CSS animation in separate div on “li hover”

    Ruby Command Line: How can I send the CTRL-C command via text in the command line?

    Why does overflow hidden affect height and how can I fix it in this example?

    How to fill HTML5 input[type=range] on the left side of the thumb with CSS only?

    Angularjs: How to *retrieve* css property from element in directive?

    Timeline divs not showing in Safari 5

    How to resize in
    with float:left?

    How to fade in and fade out text on a timer using css animations

    How to put gradient on top of background image but below text

    How to use this CSS rule for divs? [JSFiddle]

    How to make the posts of a content type horizontal scrollabel?

    CSS/Bootstrap: How to stretch containers within cols full-height?