Divs - Bootstrap ou JQuery?

Front-end

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

Maria Tavares

Curtidas 0

Melhor post

Jothaz

Jothaz

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>
GOSTEI 1

Mais Respostas

Jothaz

Jothaz

28/04/2016

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>
GOSTEI 0
Maria Tavares

Maria Tavares

28/04/2016

Isso mesmo, para colocar umas bordas, só com tabelas mesmo?
GOSTEI 0
Maria Tavares

Maria Tavares

28/04/2016

Perfeito Jothaz, está certo.
GOSTEI 0
Maria Tavares

Maria Tavares

28/04/2016

Testado isso mesmo.
GOSTEI 0
POSTAR