Je veux obtenir une sorte de superposition de couleur semi-transparente sur une ligne de tableau, j'ai créé une petite DEMO ici.

Cependant, je ne veux pas que le texte soit modifié de quelque manière que ce soit, donc juste l'arrière-plan, et la raison pour laquelle je veux que ce soit une sorte de superposition est que je veux juste que les cellules soient légèrement plus sombres et ne soient pas de la même couleur en survol . Ça a du sens?

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

Scénario:

$(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");
    });
});
0
Pontus Svedberg 21 avril 2017 à 00:45

3 réponses

Meilleure réponse

Pas besoin de JavaScript. CSS à la rescousse!

Cela définit les couleurs d'arrière-plan légèrement plus foncées en survol. Vous pouvez jouer avec les valeurs de couleur réelles pour rendre les couleurs plus sombres ou plus claires en survol.

.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>
1
Heretic Monkey 20 avril 2017 à 22:00

Annswer à 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: - votre approche rgba fonctionne - absolument pas besoin de jquery - (sauf si vous voulez être compatible avec les navigateurs les plus anciens, mais dans ce cas, vous ne pouvez pas utiliser rgba eithter. Dans ce cas, déterminez les couleurs pour chaque cell et ajoutez des classes «impaires» et «paires» aux lignes.)

0
realbart 20 avril 2017 à 22:04

Si je vous comprends bien, vous étiez très proche de votre arrière-plan rgba (sauf que vous cibliez la ligne et non les cellules). Est-ce ce que vous recherchez?

$(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>
1
APAD1 20 avril 2017 à 21:50