Mostrar botão quando passar o mouse

Front-end

29/07/2014

Estou tentando criar uma tabela que tem um botão na última coluna. Só que eu queria que esse botão só aparecesse na linha quando eu passasse o mouse em cima,e depois desaparecesse. Alguém poderia me dar uma luz sobre como proceder? Estou usando Bootstrap.
Franzé Peixoto

Franzé Peixoto

Curtidas 0

Respostas

Joel Rodrigues

Joel Rodrigues

29/07/2014

Opa, Franzé. Tudo bem?
Poderia postar o código da sua tabela, só para eu entender como está posicionado este botão?
GOSTEI 0
Franzé Peixoto

Franzé Peixoto

29/07/2014

claro que sim, da uma conferida.


<html>
<head>
    <title>Tabela com Bootstrap</title>
 
    <meta charset="utf-8"/>
 
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 
    <!-- Optional theme -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
 
    <!-- Latest compiled and minified JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Marca</th>
                    <th>Descrição</th>
                    <th>Ano</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Ford</td>
                    <td>Ka</td>
                    <td>2009</td>
                    <td><button class="btn btn-default">detalhes</button></td>
                </tr>
                <tr>
                    <td>Chevrolet</td>
                    <td>Celta</td>
                    <td>2011</td>
                    <td><button class="btn btn-default">detalhes</button></td>
                </tr>
                <tr>
                    <td>Wolksvagen</td>
                    <td>Gol</td>
                    <td>2007</td>
                    <td><button class="btn btn-default">detalhes</button></td>
                </tr>                
            </tbody>
        </table>
    </div>
</body>
</html>
GOSTEI 0
Ronaldo Lanhellas

Ronaldo Lanhellas

29/07/2014

Da uma estudada nos método ".show()" e ".hide()" do jQuery:

http://api.jquery.com/show/
http://api.jquery.com/hide/
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

29/07/2014

Isso, e também no hover(), você vai precisar dele para controlar a visibilidade do botão quando o mouse passar sobre a linha da tabela.
GOSTEI 0
Franzé Peixoto

Franzé Peixoto

29/07/2014

Da uma estudada nos método ".show()" e ".hide()" do jQuery:

http://api.jquery.com/show/
http://api.jquery.com/hide/


Ronaldo e Joel, vou olhar os links e pesquisar sobre eles.
GOSTEI 0
Franzé Peixoto

Franzé Peixoto

29/07/2014

estudei o hover, como sugerido e imagino que seja algo mais ou menos assim. porém, não sei como usar o show e o hide para esconder só o botão.


<script>
        $(function(){
            $("#tabela tr").hover(
                function(){
                    //aqui mostra
                },
                function(){
                    //aqui esconde
                }
            );
        });
    </script>
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

29/07/2014

Show de bola, Franzé. O caminho é esse mesmo.
Agora a dificuldade é selecionar o botão para poder aplicar o hide e show, né? Pesquise sobre o método children para selecionar o botão como sendo filho da coluna, que é filha da linha.
GOSTEI 0
Ronaldo Lanhellas

Ronaldo Lanhellas

29/07/2014

estudei o hover, como sugerido e imagino que seja algo mais ou menos assim. porém, não sei como usar o show e o hide para esconder só o botão.


<script>
        $(function(){
            $("#tabela tr").hover(
                function(){
                    //aqui mostra
                },
                function(){
                    //aqui esconde
                }
            );
        });
    </script>


O caminho é esse, tente fazer o seguinte agora:


<script>
        $(function(){
            $("#tabela tr").hover(
                function(){
                  if ($(".meubotao").is(":visible")) {
                     $(".meubotao").hide();   
                   }else{
                       $(".meubotao").show();
                   }
                }
            );
        });
    </script>
GOSTEI 0
Franzé Peixoto

Franzé Peixoto

29/07/2014

tem que adicionar a classe no botão, né? é essa a intenção?
GOSTEI 0
Franzé Peixoto

Franzé Peixoto

29/07/2014

Adicionei o script e coloquei a classe nos meus botões, da seguinte forma:

<td><button class="btn btn-default meubotao">detalhes</button></td>


Mas quando passo o mouse em cima da tabela, todos os botões somem de uma vez.
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

29/07/2014

Franzé, os botões somem todos porque você está aplicando o comando sobre todos que possuem a classe. No caso, você precisa filtrar só o botão da linha sobre a qual o mouse está no momento.
Tente o seguinte:
<script>
    $(function(){
        $("#tabela tr").hover(
            function(){
                $(this).children(4).children(0).show();
            },
            function(){
                $(this).children(4).children(0).hide();
            }
        );
    });
</script>
GOSTEI 0
Franzé Peixoto

Franzé Peixoto

29/07/2014

Joel, vou testar aqui e vê no que da.
GOSTEI 0
Franzé Peixoto

Franzé Peixoto

29/07/2014

Joel, deu certo mas eu gostaria que os botões iniciassem invisiveis no codigo que me passou eles começam visiveis e só depois se escondem.
GOSTEI 0
Joel Rodrigues

Joel Rodrigues

29/07/2014

Experimente adicionar esta linha:
$("#tabela button").hide();

antes dessa parte:
$("#tabela tr").hover(...
GOSTEI 0
Franzé Peixoto

Franzé Peixoto

29/07/2014

Perfeito Joel, deu mais que certo. obrigado.
GOSTEI 0
POSTAR