Menu
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);
});
897
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');
});
});
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');
});
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
