css hover property is not covering the side item

Question

css hover property is not covering the side item

Navigation

#1 by (2 votes)

0

I have two screen rectangles with information inside. I used the Hover property of CSS, so when the mouse is passed over, the rectangle increases in size. But it does not cover the rectangle on the side, the information is below. How can I make so that when I move the mouse over, the rectangular object covers the other one on the side, thus showing all the information.

    <style type="text/css">
    #tudo{
        margin: 50px 0px 0px 33px;
    }
    .position-box{
        position: relative;
        width: 400px;
        height: 160px;
        background-color: #D9D9F3;
        float: left;
        margin-left: 20px;
        margin-bottom: 20px;
    }
    .estilo:hover {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-transition: 0.5s;
    }
    a:link, a:visited, a:active{
        text-decoration: none;
        color: #000;
    }
    .titulo{
        text-align: center;
        font-weight: bold;
    }
    .estilo_tab{
        position: absolute;
        padding-right: -30px;
        width: -60px;
        border-color: #000;
    }
    td{
        text-align: center;
        padding: 0px 5px 0px 5px;
    }
</style>

<body>

<div id="tudo">
    <a href="#">
        <div class="position-box estilo">
            <span class="titulo">
                <p>Teste Dashboard</p>
            </span>
            <table border="1" class="estilo_tab">
                <tr>
                    <td>Teste </td>
                    <td>Teste </td>
                    <td>Teste </td>
                    <td>Teste </td>
                    <td>Teste </td>
                    <td>Teste </td>
                </tr>
                <tr>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                </tr>
            </table>
        </div>
    </a>
</div>

<div id="tudo">
    <a href="#">
        <div class="position-box estilo">
            <span class="titulo">
                <p>Teste Dashboard</p>
            </span>
            <table border="1" class="estilo_tab">
                <tr>
                    <td>Teste </td>
                    <td>Teste </td>
                    <td>Teste </td>
                    <td>Teste </td>
                    <td>Teste </td>
                    <td>Teste </td>
                </tr>
                <tr>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                </tr>
            </table>
        </div>
    </a>
</div>

html5 css css-hover

asked by anonymous 14.09.2018 / 00:50

1 answer

Integrate RDStation with Django + Python to send lead Get selected values from a combobox and show in a div

score 2 · Accepted Answer

Add the z-index: 1 property to the .estilo:hover { style. So the element with the status :hover will always be over the other.

Run and full screen:

#tudo{
        margin: 50px 0px 0px 33px;
    }
    .position-box{
        position: relative;
        width: 400px;
        height: 160px;
        background-color: #D9D9F3;
        float: left;
        margin-left: 20px;
        margin-bottom: 20px;
    }
    .estilo:hover {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-transition: 0.5s;
        z-index: 1;
    }
    a:link, a:visited, a:active{
        text-decoration: none;
        color: #000;
    }
    .titulo{
        text-align: center;
        font-weight: bold;
    }
    .estilo_tab{
        position: absolute;
        padding-right: -30px;
        width: -60px;
        border-color: #000;
    }
    td{
        text-align: center;
        padding: 0px 5px 0px 5px;
    }

<div id="tudo">
    <a href="#">
        <div class="position-box estilo">
            <span class="titulo">
                <p>Teste Dashboard</p>
            </span>
            <table border="1" class="estilo_tab">
                <tr>
                    <td>Teste </td>
                    <td>Teste </td>
                    <td>Teste </td>
                    <td>Teste </td>
                    <td>Teste </td>
                    <td>Teste </td>
                </tr>
                <tr>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                </tr>
            </table>
        </div>
    </a>
</div>

<div id="tudo">
    <a href="#">
        <div class="position-box estilo">
            <span class="titulo">
                <p>Teste Dashboard</p>
            </span>
            <table border="1" class="estilo_tab">
                <tr>
                    <td>Teste </td>
                    <td>Teste </td>
                    <td>Teste </td>
                    <td>Teste </td>
                    <td>Teste </td>
                    <td>Teste </td>
                </tr>
                <tr>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                    <td>info</td>
                </tr>
            </table>
        </div>
    </a>
</div>