0

Estou desenvolvendo uma aplicação web e gostaria que quando não passasse o mouse sobre a imagem, ficasse na tela só a imagem, sem a descrição do produto, o preço e o border em volta dela.

Imagem sem o efeito do hover.

inserir a descrição da imagem aqui

E quando eu passe o mouse sobre a imagem gostaria que a imagem ficasse circundada pelo border e aparecesse a descrição do produto,preço e o botão de Saiba mais.

Imagem com hover

inserir a descrição da imagem aqui

HTML

 <div class="col-sm-3 col-md-3">


            <div class="linha">

                <img src="imagens/camisa_1.JPG" alt="camisa1" class="imagem_teste">
                  <a href="#"  onMouseOver="mostrarElemento('saiba_mais1', 'inline');"  
                     onMouseOut="mostrarElemento('saiba_mais1', 'none');" > 


    <p class="descricao_produto">Calça Jeans Armani</p>

<h4 class="preco"> A partir de R$134,99</h4>
     <button class="saiba_mais" id="saiba_mais1">SAIBA MAIS</button> 

       </a>



        </div>
            </div>

CSS

.linha{
 border: 1px solid #E0E0DA;
height: 390px;
}

.descricao_produto{
color:black;
font-weight: 700;
}
.preco{
color:red;
}

JS

<script language="JavaScript">
    function mostrarElemento(id, visibilidade) {
        document.getElementById(id).style.display = visibilidade;
    }
</script>

2 Respostas 2

2

Você pode fazer isso sem uso de JavaScript, apenas com CSS:

.linha{
border: 1px solid #fff;
display: inline-block;
padding: 10px;
}

.descricao_produto{
color:black;
font-weight: 700;
}

.preco{
color:red;
}

.linha a{
	display: none;
}

.linha:hover a{
	display: inline-block;
}

.linha:hover{
	border-color: #E0E0DA;
}
<div class="col-sm-3 col-md-3">
	<div class="linha">
		<img height="100" src="https://static.hering.com.br//sys_master/images/he3/h01/9378553102366.jpg" alt="camisa1" class="imagem_teste" />
    <br />
		<a href="#">
			<p class="descricao_produto">Calça Jeans Armani</p>
			<h4 class="preco"> A partir de R$134,99</h4>
			<button class="saiba_mais" id="saiba_mais1">SAIBA MAIS</button> 
		</a>
	</div>
</div>

16
  • DvD ocorreu um problema ao colocar o codigo que você postou a largura do botão saiba mais diminui e não ocupou a largura máxima do border
    – User1999
    23/10/2017 às 3:41
  • @User1999 Meu código foi só um exemplo. Vc deve adaptar no seu código.
    – Sam
    23/10/2017 às 3:42
  • @User1999 Tira o padding: 10px;.
    – Sam
    23/10/2017 às 3:43
  • mas então pq na classe .saiba_mais{ background-color: #00008B; color: white; padding: 16px; font-size: 13px; border: none; width: 100%; margin-top: 20px; } eu coloquei width 100% mas não ocupou toda a largura do border
    – User1999
    23/10/2017 às 3:43
  • @User1999 Por causa do padding.. botei só como exemplo, pode tirar ele.
    – Sam
    23/10/2017 às 3:44
0

Oculte o item que contem a class saiba_mais dessa forma:

.saiba_mais {
  display: none;
}

E para aparecer, você pode pegar qualquer área do mouse que estiver dentro do item que conter a sua class linha dessa forma:

.linha:hover .saiba_mais {
  display: block;
}

Para a borda, você coloca border: none; para não aparecer a borda na class linha, e em linha:hover que você vai inserir a borda que deseja ao passar com o mouse.

Concluindo o seu CSS ficará assim:

.saiba_mais {
    display: none;
}

.linha:hover .saiba_mais {
    display: block;
}

.linha{
   border: none;
   height: 390px;
 }

.linha:hover {
    border: 1px solid #E0E0DA;
}

.descricao_produto{
    color:black;
    font-weight: 700;
}

.preco{
    color:red;
}

Dessa forma você pode descartar a tag <a> e o código em JS que não será mais necessário.

2
  • 1
    obrigado por responder então Fernando VR, o que eu gostaria de fazer mais não estou conseguindo é quando eu não passar o mouse por cima da imagem quero que não apresenta .linha{ border: 1px solid #E0E0DA; height: 390px; }, a borda que fica em volta da imagem.E quando eu passar o mouse por cima da imagem aparecer a linha em volta da imagem junto com button e a descrição e o preço da camiseta
    – User1999
    22/10/2017 às 23:37
  • Ahh sim @User1999, esqueci do border, mas é só colocar ele em .linha:hover. O hover é sempre para estilos com o mouse por cima. Alterei a minha resposta colocando como deve ficar com o border no hover da linha também. 23/10/2017 às 1:43

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 .