hide / show div

Question

hide / show div

Navigation

#1 by (2 votes)

0

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

Here's a preview of the site in question:

p.s: was using the visibility property.

javascript html css

asked by anonymous 20.03.2017 / 21:43

1 answer

Improving site hover scheme Thread does not execute

score 2 · Accepted Answer

//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>