CODEWITHSUNDEEP
jqueryhtmlcsscolors
Kyle Truong
Kyle Truong

Reputation: 2741

How to stop jquery from overriding CSS color?

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


});

Upvotes: 4

Views: 885

Answers (3)

Brad Evans
Brad Evans

Reputation: 728

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

Upvotes: 3

Christian
Christian

Reputation: 19750

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

Upvotes: 6

nbermudezs
nbermudezs

Reputation: 2844

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

Upvotes: 2

Related Questions