Bom dia a todos, gostaria de uma orientação como deixar o botao fixo e whats na fixo ao inves de deixar ao passar o mouse como a foto abaixo.
1 curtida
Pelo que vi só via CSS, o conjunto de elementos está junto com esse botão conferir na posição fixed, dai tem que colocar position relative para o botão fica fixo la embaixo e também colocar a opacidade 1 fixa e não na hover, dai dps tem que colocar o botão “Conferir” em posição ao passar o mouse por cima, usa css
conseguiria me orientar onde eu faço esses ajustes?
Bom dia @O_Zara fiz algumas alterações referente ao que me passou e não tive algum exito com os mesmos, acredito que fiz alguma coisa errada pois não sou um grande conhecedor de Css apenas fuço e vou tentar melhorar meu conhecimento.
Na primeira vez usei
.listagem-item .acoes-produto {
position: initial!important;
opacity: 1!important;
transition: none!important;
}
Mas acabou não atualizando, em sequencia lendo seu comentario acima deixei ele como relativo.
.listagem-item .acoes-produto {
position: relative !important;
opacity: 1!important;
transition: none!important;
}
Verificando alguns post referente a isso tentei usar esse comando.
.listagem-item .acoes-produto {
opacity: 1;
border: none;
transition: none 0s ease 0s;
display: flex;
align-items: center;
justify-content: space-between;
bottom: 0;
background: white;
}
.listagem-item .acoes-produto .botao-comprar {
width: 90%;
padding: 0px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1vw;
font-weight: bold;
border-radius: 2px;
margin: 0px auto;
color: white ;
text-transform: lowercase;
background: var(–cor-botao);
}
.listagem-item .acoes-produto .botao-comprar-ajax {
width: 55%;
margin: 0;
}
Porem não obtive erro, se alguém puder me ajudar…
tenta esse cóodigo:
.listagem.com-caixa .listagem-item .acoes-produto {
padding: 0px;
position: relative;
opacity: 1;
bottom: 0px;
}
#corpo .listagem .listagem-item:hover .acoes-produto {
bottom: 0px !important;
}
#corpo .listagem .listagem-item:hover .acoes-produto a.botao.botao-comprar.principal {
left: 0px;
opacity: 1;
width: -webkit-fill-available;
bottom: auto;
transform: translateY(-515%);
}
#corpo .listagem .listagem-item .acoes-produto a.botao.botao-comprar.principal {
left: 0px;
opacity: 1;
width: -webkit-fill-available;
bottom: auto;
transform: translateY(0%);
}
Muito Obrigado deu super certo ele fixo a unica coisa que o botão COMPRE AGORA sobe, teria como deixar fixo tbm, grato pela ajuda.
1 curtida
troca esse código que te enviei por esse:
.listagem.com-caixa .listagem-item .acoes-produto {
padding: 0px;
position: relative;
opacity: 1;
bottom: 0px;
}
#corpo .listagem .listagem-item:hover .acoes-produto {
bottom: 0px !important;
}
#corpo .listagem .listagem-item:hover .acoes-produto a.botao.botao-comprar.principal {
left: 0px;
opacity: 1;
width: -webkit-fill-available;
bottom: auto;
transform: translateY(0%);
}
#corpo .listagem .listagem-item .acoes-produto a.botao.botao-comprar.principal {
left: 0px;
opacity: 1;
width: -webkit-fill-available;
bottom: auto;
transform: translateY(0%);
}
1 curtida
