1

Meu objetivo é fazer um programa que tenha uma lista, e cada vez que o mouse passe por cima do nome dessa lista, ela mostre um conteúdo de uma div, mas então usando esse código aqui, criei um vetor pra cada item da lista, mas não to conseguindo fazer com que ele mostre. Alguém pode mostrar o erro ou solução?

<blink>
<html>
<body>
<script type="text/javascript">  
function mostra()
 {
   var arraypilotes=["1","2","3"];
   document.getElementById('arraypilotes[i]').style.display = 'block';  
}  

function esconde()
 { 
    var arraypilotes=["1","2","3"];
    document.getElementById('arraypilotes[i]').style.display = 'none';  
}  
</script>

<a href="#" onmouseover="javascript:mostra();" onmouseout="esconde();">Teste</a>  
<div id="arraypilotes[0]" style="display:none;">Conteudo da DIV</div> 
<br/>
<br/>
<a href="#" onmouseover="javascript:mostra();" onmouseout="esconde();">Teste2</a>  
<div id="arraypilotes[1]" style="display:none;">Conteudo da DIV</div>   
<br/>
<br/>
<a href="#" onmouseover="javascript:mostra();" onmouseout="esconde();">Teste3</a>  
<div id="arraypilotes[2]" style="display:none;">Conteudo da DIV</div>   
</body>
</html>
</blink>
1
  • onmouseover="javascript:mostra();" deve ser onmouseover="mostra();", o prefixo javascript: deve ser usado para executar javascript em links <a> Commented 20/05/2015 às 12:35

2 Respostas 2

4

Que tal usando apenas CSS?

div { display: none }

a:hover + div {
  display: block
}
<a href='#!'>Mostrar conteúdo do div 1</a>
<div> conteúdo do div 1</div>

<a href='#!'>Mostrar conteúdo do div 2</a>
<div> conteúdo do div 2</div>

3
  • Foste mais rápido ! :) +1
    – Sergio
    Commented 20/05/2015 às 12:36
  • 1
    @Sergio aprendendo com tu :p Commented 20/05/2015 às 12:43
  • valeu cara boa outra solucao alternativa!!
    – Capoub
    Commented 20/05/2015 às 12:53
3

Simplificando seu código passe o id da sua div no parâmetro dos método mostrae esconde.

    <html>
    <!DOCTYPE html>
    <html>
    <body>
        <script type="text/javascript">
            function mostra(idDiv) {
                document.getElementById(idDiv).style.display = 'block';
            }

            function esconde(idDiv) {
                document.getElementById(idDiv).style.display = 'none';
            }
        </script>

        <a href="#" onmouseover="javascript:mostra('div0');" onmouseout="esconde('div0');">Teste</a>
        <div id="div0" style="display: none;">Conteudo da DIV</div>
        <br />
        <br />
        <a href="#" onmouseover="javascript:mostra('div1');" onmouseout="esconde('div1');">Teste2</a>
        <div id="div1" style="display: none;">Conteudo da DIV</div>
        <br />
        <br />
        <a href="#" onmouseover="javascript:mostra('div2');" onmouseout="esconde('div2');">Teste3</a>
        <div id="div2" style="display: none;">Conteudo da DIV</div>
    </body>
    </html>

1
  • valeeeu cara muito obrigado vai ajudar que so, brigadao mesmo
    – Capoub
    Commented 20/05/2015 às 12:53

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 .