1

Tenho uma tabela com 6 colunas, mas só quero dar hover nas 4 primeiras colunas. É possível fazer isto?

Estou usando MVC 4 e bootstrap

Já estou usando um método em 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");
        });
    });

Mas toda vez que eu tiro o mouse da Linha o hover continua lá. Preciso que ele saia. Dá pra melhorar este método ou tem algo em CSS que possa ser feito?

EDIT: Preciso que ele dê hover nas 4 primeiras(juntas) colunas e as outras 2 colunas fiquem como estão, pois possuem hovers proprios

Exatamente assim: http://uploaddeimagens.com.br/imagens/grid-png--3, mas quando sair da tr o hover suma também

5 Respostas 5

4

isso pode ser feito diretamente no 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


Segunda opção com todos os valores selecionados:

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


Terceira e melhor opção com adição e remoção de 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;}

você pode ainda dar um hover nessa nova classe alterando o CSS para

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

DEMO

5
  • 2
    Dessa maneira ele dá hover e coluna por coluna, eu preciso que quando ele passar o mouse em cima da primeira até a quarta coluna ele dê hover nas 4 juntas. Commented 3/04/2014 às 18:45
  • atualizei a resposta de acordo com sua duvida
    – tiaguinhow
    Commented 3/04/2014 às 18:56
  • @ThiagoAlex Por favor edite a pergunta para deixar isso claro, pois não dá para saber que essa é a sua intenção sem ler seu comentário acima. Veja que a maioria das respostas que você recebeu não faz o que você quer.
    – bfavaretto
    Commented 4/04/2014 às 3:09
  • de fato não deu pra entender a pergunta. Acredito que as opções que deixei acima vão ajudar a resolver seu problema Alex, caso for util, não esqueça de positivar a resposta.
    – tiaguinhow
    Commented 4/04/2014 às 12:19
  • @ThiagoAlex isso resolveu o seu problema ? não esqueça de finalizar o topico.
    – tiaguinhow
    Commented 7/04/2014 às 13:26
2

Para a melhor compatibilidade com os browseres, recomendo que faça isso usando o seguinte 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;
}

Dessa forma vai funcionar até mesmo no IE8.

Exemplo no jsfiddle

jsfiddle embedded: permite visualizar no IE8

Assim, você evita usar javascript para fazer esse efeito, e dá um bom suporte aos browsers.

2

Imagi no que voce nao queira apenas as 4 primeiras, mas na realidade vincular X linhas a um determnnado contexto, podendo ser 1, 2 ou N linhas. Desta forma considero que utilize um identificador de contexto ex: data-codigo em cada linha e na função de hover vc identifica as linhas que tem o mesmo contexto e destaca todas de uma vez:

Solução sugerida: 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>

Ajustei seu JS para tratar esses casos:

$(".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"
            });
        }
 );
2

Você pode usar somente css nth-last-of-type(-n+1)

Ficaria:

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

JS Fiddle

1

Faça mais um evento baseado no .mouseleave():

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .