F�rum Divs - Bootstrap ou JQuery? #552647

28/04/2016

Ol� pessoal, duvida, sobre qual usar?

Tenho uma lista de itens ex:
<div> item 1 <span > editar excluir</span></div>
<div> item 2 <span > editar excluir</span></div>
<div> item 3 <span > editar excluir</span></div>
<div> item 4 <span > editar excluir</span></div>
<div> item 5 <span > editar excluir</span></div>
<div> item 6 <span > editar excluir</span></div>
........

Ao lado de cada item tenho bot�es de excluir e editar o item,
por�m eu preciso que esses bot�es s� apare�am quando passar o mouse na div.

Maria Tavares

Curtir t�pico

+ 0

Responder

Post mais votado

29/04/2016

� indicado o uso de tables somente para tabula��o de dados.

No caso o indicado � usar CSS, no caso manipular o atributo "border".

Como voc� n�o explicitou o que pretendes, fica mais dif�cil sugerir algo, mas possivelmente este c�digo pode ser refinado e melhorado.

Outro detalhe usei o CSS no mesmo aquivo somente para ficar mais claro, mas as boas pr�ticas pregam que deve ficar em arquivo separdo.

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type='text/javascript'>//<![CDATA[
        window.onload=function(){
            $('.conteudo1').hide();
            $('.conteudo2').hide();

            $('.mostrar1').mouseover(function(){
                 $('.conteudo1').show();
            });
            $('.mostrar1').mouseout(function(){
                 $('.conteudo1').hide();
            });

            $('.mostrar2').mouseover(function(){
                 $('.conteudo2').show();
            });
            $('.mostrar2').mouseout(function(){
                 $('.conteudo2').hide();
            });
        }//]]> 
    </script>

    <style>
        .mostrar1{
            border: solid 2px red;
        }
            
        .conteudo1{
            border: solid 2px yellow;
        }
        
        .mostrar2{
            border: solid 2px red;
        }
            
        .conteudo2{
            border: solid 2px yellow;
        }
    </style>
</head>
    <body>
        <div class="mostrar1"> item 1 <span class="conteudo1" > editar excluir</span></div>
        <div class="mostrar2"> item 2 <span class="conteudo2"> editar excluir</span></div>
    </body>
</html>

Jothaz

Responder

Gostei + 1

Mais Posts

28/04/2016

Jothaz

Existem v�rias formas de fazer o que voc� que.

Veja se o c�digo abaixo � o que voc� quer?

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type='text/javascript'>//<![CDATA[
    window.onload=function(){
        $('.conteudo1').hide();
        $('.conteudo2').hide();

        $('.mostrar1').mouseover(function(){
             $('.conteudo1').show();
        });
        $('.mostrar1').mouseout(function(){
             $('.conteudo1').hide();
        });

        $('.mostrar2').mouseover(function(){
             $('.conteudo2').show();
        });
        $('.mostrar2').mouseout(function(){
             $('.conteudo2').hide();
        });
    }//]]> 
    </script>
</head>
    <body>
        <div class="mostrar1"> item 1 <span class="conteudo1" > editar excluir</span></div>
        <div class="mostrar2"> item 2 <span class="conteudo2"> editar excluir</span></div>
    </body>
</html>

Responder

Gostei + 0

29/04/2016

Maria Tavares

Isso mesmo, para colocar umas bordas, s� com tabelas mesmo?

Responder

Gostei + 0

29/04/2016

Maria Tavares

Perfeito Jothaz, est� certo.

Responder

Gostei + 0

30/04/2016

Maria Tavares

Testado isso mesmo.

Responder

Gostei + 0