Hover only in some columns

Question

Hover only in some columns

Navigation

#1 by (4 votes)
#2 by (2 votes)
#3 by (2 votes)
#4 by (2 votes)
#5 by (1 votes)

1

I have a table with 6 columns, but I just want to give hover in the first 4 columns. Is it 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 draw the mouse from the Line the hover is still there. I need him to leave. Can you improve this method or do you have something in% of what can be done?

EDIT: I need it to hover in the first 4 (joins) columns and the other 2 columns stay as they are, because they have their own hovers

Exactly like this: link , but when you leave tr the hover also adds

javascript html css twitter-bootstrap asp.net-mvc

asked by anonymous 03.04.2014 / 20:30

5 answers

I have sets of variables storing different settings. How to use a specific set depending on the occasion? Handle single record while

score 4 · 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><tdclass="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><tdclass="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 even give a hover in this new class by changing CSS to

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

DEMO

score 2 · Answer 2

For better browser compatibility , I recommend that you do so 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 will work even in IE8 .

Example in jsfiddle

jsfiddle embedded: view in IE8

So you avoid using javascript to do this, and it gives good support to browsers.

score 2 · Answer 3

Imagine that you do not want only the first 4, but actually link X lines to a certain context, which can be 1, 2, or N lines. This way I consider that I use a context identifier ex: data-codigo on each line and on the hover function you identify lines that have the same context and highlight 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"
            });
        }
 );

score 2 · Answer 4

2

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

I would stay:

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

JS Fiddle

03.04.2014 / 21:08

score 1 · Answer 5

1

Make one more event based on .mouseleave() :

link

03.04.2014 / 20:42