hide/show div

Asked

Viewed 2,492 times

0

I am creating a website of a travel agency, and at the beginning of the site I created 3 prominent places. When the user passes the mouse by the images, the image should darken and appear "more details". The problem is that unable to hide/show div with css.

Here is a preview of the site in question:

inserir a descrição da imagem aqui

p s.: was using the property visibility.

javascript html css

  • puts at least the site URL, but preferably, put the code that Voce is using... in a way that we can verify what the problem... or what needs to be done

  • put Function Hide() to hide the Divs when removing the mouse over the images

1 answer

2


//SCRIPT

function mostrar(obj) {
    document.getElementById('div1').style.display="none";
    document.getElementById('div2').style.display="none";
    document.getElementById('div3').style.display="none";

  switch (obj.id) {
    case 'mostra1':
     document.getElementById('div1').style.display="block";
     break
    case 'mostra2':
     document.getElementById('div2').style.display="block";
     break
    case 'mostra3':
     document.getElementById('div3').style.display="block";
     break
  }
}
//função para ocultar as divs ao retirar o mouse sobre as imagens
function hide() {
       document.getElementById('div1').style.display="none";
       document.getElementById('div2').style.display="none";
       document.getElementById('div3').style.display="none";
}
//CSS

.imge {
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}
.imge:hover {
   -webkit-filter: brightness(10%);
   filter: brightness(10%);
}
<!-- HTML -->

<a href="#" onmouseover="mostrar(this);" onmouseout="hide()" id="mostra1">
<img border="0" src="IMAGE1" class="imge"></a> 
<a href="#" onmouseover="mostrar(this);" onmouseout="hide()" id="mostra2">
<img border="0" src="IMAGE2" class="imge"></a> 
<a href="#" onmouseover="mostrar(this);" onmouseout="hide()" id="mostra3">
<img border="0" src="IMAGE3" class="imge"></a>

<div id="div1" style="display:none;">
   Descrição produto 1: 111111111111111111111111
</div>
<div id="div2" style="display:none;">
   Descrição produto 2: 222222222222222222222222
</div>
<div id="div3" style="display:none;">
   Descrição produto 3: 333333333333333333333333
</div>

  • Thank you very much. You helped me a lot. thanks :)

Browser other questions tagged javascript html css

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