How do I display buttons on top of my div?

Question

How do I display buttons on top of my div?

Navigation

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

0

Good afternoon, I have a div made with bootstrap and css and I want it when I hover over it, there are two buttons right in the middle of this div. My idea is the following, I have several divs that contains articles and when I hover the mouse on it has to appear two buttons, one to edit the article and another to delete.

I can not do this, I'm not very good with css and the tutorials I think none are specific to this and many use divs with absolute position and this buga all my page.

The HTML of the page looks like this:

<?php include_once './template/header.php'; ?>
<div class="container col-md-12 col-xs-12" id="artigos" style="padding-top: 10px">
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" id="artigo" style="margin-right: 5px; margin-left: -10px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px; margin-left: -10px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px; margin-left: -10px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                    utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                    embaralhou para fazer um livro de modelos de t...
                </p>
            </div>
        </div>
    </a>
</div>
<?php include_once './template/footer.php'; ?>

There are several example articles that I want to appear on the page and all with the effect of appearing the button in front.

Much of the css is from the bootstrap, but it has a little bit done by me too:

.panel-artigo:hover{  
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

Picture of how my page is:

html css

asked by anonymous 06.11.2015 / 17:04

3 answers

2

As you already have a response with css, I'll post one using jQuery just to have another way of doing it.

First let's create the buttons in each div , like this:

<div class="divButton" id="">    
       <button class="btn-primary">Olá</button>
</div>

Note that div has class divButton . Elá is responsible for leaving the hidden button ( display: none ) and is doing the alignment, which you must adapt to the way you want. This class is as follows:

.divButton{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     margin-top: 20%;
    text-align: center;  
    display: none; 
}

Now that we already have the button in place and hidden, let's just show them with jQuery.

$('.panel-artigo').mouseenter(function(){
    jQuery(this).find('.divHide, .divButton').fadeIn();
}).mouseleave(function(){
    jQuery(this).find('.divHide, .divButton').fadeOut();
});

This code is responsible for showing and hiding the mouse buttons by div .

Your complete code looks like this:

$('.panel-artigo').mouseenter(function(){
    jQuery(this).find('.divHide, .divButton').fadeIn();
}).mouseleave(function(){
    jQuery(this).find('.divHide, .divButton').fadeOut();
});

.panel-artigo:hover{  
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.divButton{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     margin-top: 20%;
    text-align: center;  
    display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<div class="container col-md-12 col-xs-12" id="artigos" style="padding-top: 10px">
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" id="artigo" style="margin-right: 5px; margin-left: -10px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                 Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                 <div class="divButton" id="">    
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
              Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                 <div class="divButton" id="">      
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
           Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                <div class="divButton" id="">    
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px; margin-left: -10px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                <div class="divButton" id="">    
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                 Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                 <div class="divButton" id="">      
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
 Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                 <div class="divButton" id="">      
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px; margin-left: -10px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
        Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                 <div class="divButton" id="">       
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo" style="margin-right: 5px">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
               Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                <div class="divButton" id="">      
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
    <a href="#" style="display:block; text-decoration: none; color: #000">
        <div class="panel panel-default col-md-4 panel-artigo">
            <div class="panel-body">
                <div class="panel-header">
                    <h1 style="margin-top: 0px">Titulo 1</h1>
                </div>
                <p>
                 Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
                </p>
                 <div class="divButton" id="">       
                    <button class="btn-primary">Olá</button>
                </div>
            </div>
        </div>
    </a>
</div>

Follow a JSFiddle Example .

06.11.2015 / 17:37

0

Taking advantage of the two good answers above I put a code for
complete the answer of how you can get the values of the buttons to know which article you are editing

Note: The repeat loop is just for example because I believe that these articles come from the database, instead of you can go through the array of articles in the database and instead of the value of the buttons you put the id or code.

I did it in C #, so just change to php.

<link href="../Content/bootstrap.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.10.2.min.js"></script>

<style>       
     .panel-artigo {
        position: relative;           
    }

    .meus-botoes {   
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<script type="text/javascript">

    $(document).ready(function () {
        $(document).on('mouseenter', '.minhaDiv', function () {
            $(this).find(":button").show();

        }).on('mouseleave', '.minhaDiv', function () {
            $(this).find(":button").hide();
        });


        $(".Gravar").click(function (e) {
            alert($(this).attr("value"));
        });

        $(".Deletar").click(function (e) {
            alert($(this).attr("value"));
        });
    });

</script>

</head>
<body>
<form id="form1" runat="server">

    <div class="container col-md-12 col-xs-12" id="artigos" style="padding-top: 10px">

        <% for (int i = 1; i < 10; i++)
            {%>

        <div class="minhaDiv">
            <a href="#" style="display: block; text-decoration: none; color: #000">
                <div class="panel panel-default col-md-4 panel-artigo">
                    <div class="meus-botoes">
                        <button type="button" class="btn btn-success Gravar" style="display: none;" value="<%=i%>">Gravar</button>
                        <button type="button" class="btn btn-danger Deletar" style="display: none;" value="<%=i%>">Deletar</button>
                    </div>
                    <div class="panel-body">
                        <div class="panel-header">
                            <h1 style="margin-top: 0px">Titulo 1</h1>
                        </div>
                        <p>
                            Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                                utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                                embaralhou para fazer um livro de modelos de t...
                        </p>
                    </div>
                </div>
            </a>

        </div>

        <%  } %>
    </div>
</form>

06.11.2015 / 18:04

Write XML from a List How to submit form without giving refresh on the page?

score 5 · Accepted Answer

You can use something like this:

.panel-artigo {
    position:relative; //Importante para que os botões estejam centralizados
}
.meus-botoes {
    display:none; //garante que o botão não apareça na tela
    margin:0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.panel-artigo:hover .meus-botoes {
    display:block; //Exibe os botões somente com o hover
}

And your html:

<a href="#" style="display:block; text-decoration: none; color: #000">
    <div class="panel panel-default col-md-4 panel-artigo">
        <div class="meus-botoes">
            <!-- insira o html dos botoes aqui -->
        </div>
        <div class="panel-body">
            <div class="panel-header">
                <h1 style="margin-top: 0px">Titulo 1</h1>
            </div>
            <p>
                Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo 
                utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os 
                embaralhou para fazer um livro de modelos de t...
            </p>
        </div>
    </div>
</a>

Would that be?