1

Bom dia, boa tarde, boa noite.

Estou tendo problemas ao utilizar o transform: scale(1.7) no div:hover, toda vez q passo o mouse, o div aumenta, mas o do lado fica na frente dele, como posso fazer pra q esse q passei o mouse fique na frente?

Esse é o código:

<!DOCTYPE html>
<html>
<head>
    <style>
        div{background-color: red;
        position: relative;
        width: 100px;
        height: 70px;
        margin: 2% 1%;
        display: inline-block;
        transition: all 0.1s;}
        div:nth-child(2){background-color: blue}
        div:nth-child(3){background-color: green}
        div:nth-child(4){background-color: yellow}
        div:nth-child(5){background-color: black}
        div:hover{transform: scale(1.7)}
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

2 Respostas 2

0

Você pode usar a propriedade z-index, abaixo adicionei um link sobre a propriedade:

dev-media: css z-index

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            background-color: red;
            position: relative;
            width: 100px;
            height: 70px;
            margin: 2% 1%;
            display: inline-block;
            transition: all 0.1s;
        }

        div:nth-child(2) {
            background-color: blue
        }

        div:nth-child(3) {
            background-color: green
        }

        div:nth-child(4) {
            background-color: yellow
        }

        div:nth-child(5) {
            background-color: black
        }


        div {
            z-index: 10;
        }

        div:hover {
            transform: scale(1.7);
            z-index: 9999;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>

1
  • se não fizer transição com valores adequados no z-index, ao tirar o hover a div vai atravessar a outra - por exemplo, faça hover no verde e tire o pointer de cima, olhando pro amarelo para visualizar. (especifique um z-index baixo na div sem hover pra resolver)
    – Largato
    Commented 13/07/2019 às 22:57
0

Voce pode definir o Z-Index

A propriedade z-index especifica uma ordem de pilha de um elemento. Um elemento com maior ordem de empilhamento está na frente de um elemento com uma ordem de pilhagem menor

<!DOCTYPE html>
<html>
<head>
    <style>
        div{background-color: red;
        position: relative;
        width: 100px;
        height: 70px;
        margin: 2% 1%;
        display: inline-block;
        transition: all 0.1s;}
        div:nth-child(2){background-color: blue}
        div:nth-child(3){background-color: green}
        div:nth-child(4){background-color: yellow}
        div:nth-child(5){background-color: black}
        div:hover{transform: scale(1.7)}
        div:hover{Z-Index:9999};
    </style>

</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

1
  • se não fizer transição com valores adequados no z-index, ao tirar o hover a div vai atravessar a outra - por exemplo, faça hover no verde e tire o pointer de cima, olhando pro amarelo para visualizar. (especifique um z-index baixo na div sem hover pra resolver) - aproveitando, compensa editar e deixar a grafia do z-index em minuscula.
    – Largato
    Commented 13/07/2019 às 22:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .