Exibir/Ocultar div

[Yuri Witkowsky 0]

Oi, como faço para deixar um botão oculto sob uma imagem e só exibir ao passar o mouse sob a imagem?

 

Desde já agradeço, estou com muita dificuldade nisso, já encontrei alguns scripts para fazer isso mas a maioria não funciona corretamente ou o botão aparece em algum canto da tela, sendo que esse botão deve se repetir dentro de cada imagem e são diversas imagens . Seria mais um menos um botão Leia mais.. que aparece ao passar o mouse sob a imagem, poderiam me ajudar? obrigado.

 

Estou usando esse codigo:

<script>
function aparece(){
document.getElementById("teste").style.visibility = 'visible';
}

function desaparece(){
document.getElementById("teste").style.visibility = 'hidden';
}
</script>
<a href="#" onmouseover="aparece()" onmouseout="desaparece()">Teste</a>
<div id="teste" style="visibility:hidden;" onmouseover="aparece()" onmouseout="desaparece()"><a href="#" class="favourite">Favoritar</a></div>

[Guilherme_90 33]

Eu faria isso com jQuery, bem mais fácil!

A lógica seria mais ou menos assim: (Não testei... fazendo agora para exemplo)

 

<style>
  div#image{ position:relative }
</style>

<div id="image">
    <img src="image.jpg" title="Imagem" />
    <a href="javascript:void(0)" title="" style="display:none;">Button</a>
<div>

<script type="text/javascript">
    $(function(){
         $("div#image img").mouseover(function(){
              $("div#image a").toggle('slow');
              $("div#image a").css('position', 'absolute', 'bottom', '0');
         });
    });
</script>

É por aí...

[Yuri Witkowsky 0]

Não funcionou :(

[Gabriel Jacinto 74]

Não entendo quase nada de JS. Mas como você me pediu, decidi ajudar.

Não seria assim?

<script>
function aparece(){
document.getElementById("teste").style.visibility = 'visible';
}

function desaparece(){
document.getElementById("teste").style.visibility = 'hidden';
}
</script>
<img src="dsf" onmouseover="aparece()">
<div id="teste" style="visibility:hidden;" onmouseout="desaparece()"><a href="#" class="favourite">Favoritar</a></div>

[MafnGamer 13]

<style>

div#image{ position:relative }

</style>

 

<div id="image">

<img src="image.jpg" title="Imagem" />

<a href="javascript:void(0)" title="" style="display:none;">Button</a>

<div>

 

<script type="text/javascript">

$(function(){

$("div#image img").mouseover(function(){

$("div#image a").toggle('slow');

$("div#image a").css('position', 'absolute', 'bottom', '0');

});

});

</script>

Tente mudar esse

$("div#image a").toggle('slow');
              $("div#image a").css('position', 'absolute', 'bottom', '0');

por

$("div#image a").show();

:thumbsup: tente aí :thumbsup:

[Guilherme_90 33]

MafnGamer

É a mesma coisa. A função toggle faz um show e hide, porém eu posso passar no parametro um efeito "slow" ou "fast".

 

Tem outra solução que é mais fácil ainda, fazendo só com CSS. Faça uma busca por elemento "content" e como o usar o "after" ou "before".

[MafnGamer 13]

Não sabia Guilherme_90, com CSS é uma boa opção.