css hover property is not covering the next item

Asked

Viewed 35 times

0

I have two rectangles of the screen with information inside. I used the CSS Hover property, so that when the mouse is passed over, the rectangle increases in size. But it does not cover the rectangle that is on the side, the information is below. How can I make so that when I pass the mouse over, the rectangular object covers the other 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>

css html5 css-hover

1 answer

2


Add the property z-index: 1 style .estilo:hover {. Thus the element with the state :hover will always be on top of each 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>

  • 1

    Thank you very much Sam. It helped me a lot.

Browser other questions tagged css html5 css-hover

You are not signed in. Login or sign up in order to post.