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..

    Nine divs in columns. How to design this?

    How to handle the html and css of one side image and other side content and vice versa

    How to change the hover pseudo class of an element using jquery

    How to separate header from content

    How do I go about targeting the literal “first-child” of a div, styling depending on element type

    CSS: How to put content between header and footer

    How to specify different Css for different Mobiles (BB, Iphone, Nexus… )

    How can i override the margin: 0; padding: 0; border: 0; css styles from main body css for ul li

    How to attach CSS to my template?

    How to apply CSS using User Scripts

    how to middle vertical-align using bootstrap input-group

    How to dynamically generate CSS3 keyframe steps using SASS?

    How can I display an alert with the position of the element that was clicked?

    How to style a video iFrame?

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

    How do I make text and other items look like chalk without a specialized font using only HTML and CSS? [closed]

    how to make the textarea's width fixed but keep the height flexible CSS

    How to Implement different backgrounds on scroll [closed]

    How to remove default CSS from TextField in flex?

    How to make box light up in navigation bar - CSS

    How to apply CSS styles to links that appear in table headers?

    How to apply css logic [duplicate]

    How can I find the CSS3 rotation of an element?

    How do I require an HTML document (webpage) to be a certain size, or use scroll bars

    How to add second level to a submenu in a dropdown navigation css

    How can I remove frame like background in twentysixteen theme

    How do I change image A when hovering over image B without JavaScript only CSS

    How to reverse the text with js/css? [duplicate]

    CSS How to have a text caption in the bottom of an image?

    How to make two divs side by side using inline-block?