Hover only on some columns

Question

I have a table with 6 columns, but I just want to give hover in the first 4 columns. It is possible to do this?

I’m using MVC 4 and bootstrap

I’m already using a method in Jquery:

$(".table tbody tr").hover(function () {
        $("table tbody tr .cell-padrao").each(function (index) {
            $(this).css("background-color", "#FFF");
        });

        $(this).each(function (index) {
            $(this).find(".cell-padrao").css("background-color", "#eee");
            $(this).find(".cell-padrao").css("cursor", "pointer");
        });
    });

But every time I take the mouse off the line the Hover is still there. I need it to come out. Can you improve this method or has something in CSS that can be done?

EDIT: I need him to give the 4 first (together) columns and the other 2 columns stay as they are, because they have hovers themselves

Just like that: http://uploaddeimagens.com.br/imagens/grid-png--3, But when you get out of Tr the Houver vanish too

Answer 1

this can be done directly in CSS

HTML:

<table>
    <tr>
        <td class="colorido">Coluna 1</td>
        <td class="colorido">Coluna 2</td>
        <td class="colorido">Coluna 3</td>
        <td>Coluna 4</td>
        <td>Coluna 5</td>
    </tr>
</table>

CSS:

.colorido:hover{color: red;}

DEMO

---

Second option with all values selected:

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<table>
    <tr>
        <td class="colorido">Coluna 1</td>
        <td class="colorido">Coluna 2</td>
        <td class="colorido">Coluna 3</td>
        <td>Coluna 4</td>
        <td>Coluna 5</td>
    </tr>
</table>

Javascript/jQuery

$("table").mouseenter(function(){
    $(".colorido").css('color','red');
}).mouseleave(function() {
    $(".colorido").css('color','black');
});

DEMO

---

Third and best option with addition and removal of classes:

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<table>
    <tr>
        <td class="colorido">Coluna 1</td>
        <td class="colorido">Coluna 2</td>
        <td class="colorido">Coluna 3</td>
        <td>Coluna 4</td>
        <td>Coluna 5</td>
    </tr>
</table>

Javascript/jQuery

$("table").mouseenter(function(){
    $(".colorido").addClass('novaClasse');
}).mouseleave(function() {
    $(".colorido").removeClass('novaClasse');
});

CSS

.novaClasse{color: red; cursor: pointer;}

you can still give a Hover in this new class by changing the CSS to

.novaClasse{color: red; cursor: pointer;}
.novaClasse:hover{color: green;}

DEMO

Answer 2

You can use css only nth-last-of-type(-n+1)

Would be:

table tr td:not(:nth-last-of-type(-n+2)):hover{
    color:red;
}

JS Fiddle

Answer 3

To the better compatibility with browsers, recommend you do this using the following CSS:

table tr td:first-child:hover,
table tr td:first-child + td:hover,
table tr td:first-child + td + td:hover,
table tr td:first-child + td + td + td:hover
{
    color: red;
    cursor: pointer;
}

That way it’ll work even on IE8.

Example in jsfiddle

jsfiddle Embedded: allows viewing on IE8

Thus, you avoid using javascript to do this effect, and gives a good support to browsers.

Answer 4

Imagi in Voce want not only the first 4, but actually link X lines to a context determnnado, can be 1, 2 or N lines. This way I consider using a context identifier ex: data-codigo on each line and in the function of Hover vc identifies lines that have the same context and highlights them all at once:

Suggested solution: JS FIDDLE

<table>
    <tbody>
        <tr data-codigo="1"><td>Contexto 1</td></tr>
        <tr data-codigo="1"><td>Contexto 1</td></tr>
        <tr data-codigo="1"><td>Contexto 1</td></tr>
        <tr data-codigo="1"><td>Contexto 1</td></tr>
        <tr data-codigo="2"><td>Contexto 2</td></tr>
        <tr data-codigo="2"><td>Contexto 2</td></tr>
        <tr data-codigo="2"><td>Contexto 2</td></tr>
        <tr data-codigo="2"><td>Contexto 2</td></tr>
    </tbody>
</table>

I set your JS to handle these cases:

$(".table tbody tr").hover(
        function () {
            var jqTab = $(this).closest('table');
            jqTab.find("tr[data-codigo=\"" + $(this).data('codigo') + "\"]").css("background-color", "#FF0");
        }, 
        function() {
            var jqTab = $(this).closest('table');
            jqTab.find("tr[data-codigo=\"" + $(this).data('codigo') + "\"]").css({
                 "backgroundColor": "#CCC",
                 "cursor": "pointer"
            });
        }
 );

Answer 5

Make another event based on .mouseleave():

http://api.jquery.com/mouseleave/