CODEWITHSUNDEEP
jqueryhtmlcss
Pontus Svedberg
Pontus Svedberg

Reputation: 305

Change table row background color on hover

I want to achieve some kind of half transparent color overlay over hover on a table row, I created a little DEMO here.

However I don't want the text to be altered in any way, so just the background, and the reason I want it to be kind of a overlay is that I just want the cells to be slightly darker and not the same color on hover. Make sense?

code:

<table id="compTable" class="prTable">
    <tr class="prTableHeader">
        <th></th>
        <th></th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr class="prTableRow">
        <td class="prExerVariNameTD blackColor">Squat</td>
        <td class="prVerticalSpace"></td>
        <td class="prTableCell" title="@finalDate">100</td>
        <td class="prTableCell" title="@finalDate">100</td>
        <td class="prTableCell" title="@finalDate">100</td>
    </tr>
</table>

CSS

.prTableCell {
    padding: 7px;
    width: 60px;
    text-align:center;
    border:1px solid #e1e1e1;
    cursor:default;
}

.prExerVariNameTD {
    width: 200px;
    border:1px solid #e1e1e1!important;
    padding: 5px 5px 5px 10px;
    background-color: white;
}

.prVerticalSpace {
    width: 50px;
}

.rowHover {
    /*background: rgba(204, 204, 204, 0.5);*/
    opacity: 0.5;
}

Script:

$(document).ready(function () {
    $("table#compTable .prTableCell:even").css("background-color", "#eeeeee");
    $("table#compTable .prTableCell:odd").css("background-color", "White");

    $(".prTableRow").hover(function () {
        $(this).toggleClass("rowHover");
    });
});

Upvotes: 0

Views: 3606

Answers (3)

realbart
realbart

Reputation: 3965

annswer at https://jsfiddle.net/v9jphr5h/

tr:nth-child(2n) 
{
  background-color:#ffe;
}

tr:nth-child(n+2):hover>td,
tr:nth-child(n+2):hover>td.prTableCell[title]{
    background: rgba(204, 204, 204, 0.5)
}

bottom line: - your rgba-approach works - absolutely no need for jquery - (unless you want to compatible with the oldest browsers, but in that case, you can't use rgba eithter. In that case, figure out the colors for every cell and add "odd" and "even" classes to the rows.)

Upvotes: 0

Heretic Monkey
Heretic Monkey

Reputation: 12113

No need for JavaScript. CSS to the rescue!

This sets the background colors slightly darker on hover. You can play with the actual color values to make the colors darker or lighter on hover.

.prTableCell {
  padding: 7px;
  width: 60px;
  text-align: center;
  border: 1px solid #e1e1e1;
  cursor: default;
}

.prExerVariNameTD {
  width: 200px;
  border: 1px solid #e1e1e1!important;
  padding: 5px 5px 5px 10px;
  background-color: white;
}

.prVerticalSpace {
  width: 50px;
}

.prTableCell:nth-child(even) {
  background-color: #eee;
}

.prTableCell:nth-child(odd) {
  background-color: #fff;
}

.prTableRow:hover .prTableCell:nth-child(even) {
  background-color: #ddd;
}

.prTableRow:hover .prTableCell:nth-child(odd) {
  background-color: #eee;
}
<table id="compTable" class="prTable">
  <tr class="prTableHeader">
    <th></th>
    <th></th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr class="prTableRow">
    <td class="prExerVariNameTD blackColor">Squat</td>
    <td class="prVerticalSpace"></td>
    <td class="prTableCell" title="@finalDate">100</td>
    <td class="prTableCell" title="@finalDate">100</td>
    <td class="prTableCell" title="@finalDate">100</td>
  </tr>
</table>

Upvotes: 1

APAD1
APAD1

Reputation: 13666

If I'm understanding you correctly, you were very close with your rgba background(except that you were targeting the row and not the cells). Is this what you're looking for?

$(document).ready(function () {
    $("table#compTable .prTableCell:even").css("background-color", "#eeeeee");
    $("table#compTable .prTableCell:odd").css("background-color", "White");

    $(".prTableRow").hover(function () {
        $(this).toggleClass("rowHover");
    });
});
.prTableCell {
    padding: 7px;
    width: 60px;
    text-align:center;
    border:1px solid #e1e1e1;
    cursor:default;
}

.prExerVariNameTD {
    width: 200px;
    border:1px solid #e1e1e1!important;
    padding: 5px 5px 5px 10px;
    background-color: white;
}

.prVerticalSpace {
    width: 50px;
}

.rowHover td:not(.prVerticalSpace) {
    background: rgba(204, 204, 204, 0.5) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="compTable" class="prTable">
    <tr class="prTableHeader">
        <th></th>
        <th></th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr class="prTableRow">
        <td class="prExerVariNameTD blackColor">Squat</td>
        <td class="prVerticalSpace"></td>
        <td class="prTableCell" title="@finalDate">100</td>
        <td class="prTableCell" title="@finalDate">100</td>
        <td class="prTableCell" title="@finalDate">100</td>
    </tr>
</table>

Upvotes: 1

Related Questions