0

Galera preciso fazer com que quando passe o mouse(hover) em uma div ela mude o conteúdo da lateral inserir a descrição da imagem aqui a imagem explica bem como o processo deve ser feito quando passar o mouse em cima da div deve trocar os textos na lateral gostaria de saber se é possível fazer isso com hover segue meu código:

 <div class="col-md-4">
                    <div class="row">
                        <div class="needs">
                            <h4 class="title">Quais são suas necessidades?</h4>
                            <div class="col-md-6 no-padding">
                                <div onmouseover="change(1)" class="service -bg" id="p1">
                                    <i class="icon -thecnology"></i>
                                    <p class="description migration">Migração</p>
                                </div>
                            </div>
                            <div class="col-md-6 no-padding">
                                <div onmouseover="change(2)" class="service -bg"  id="p2">
                                    <i class="icon -project"></i>
                                    <p class="description project" style="white-space: nowrap">Projeto Personalizado</p>
                                </div>
                            </div>
                            <div class="col-md-6 no-padding">
                                <div onmouseover="change(3)" class="service -bg"  id="p3">
                                    <i class="icon -security"></i>
                                    <p class="description security">Segurança</p>
                                </div>
                            </div>
                            <div class="col-md-6 no-padding">
                                <div onmouseover="change(4)" class="service -bg"  id="p4">
                                    <i class="icon -optimization"></i>
                                    <p class="description optimization">Otimização</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="box-descriptions" id="content">
                        <p id="content-one" class="content one">Podemos ajudar a migrar seus aplicativos para a Origiweb, tornando essa
                            transiçao mais fácil e suave para a sua equipe.</p>

                        <p id="content-two" class="content two">Podemos ajudar a migrar seus aplicativos para a Origiweb, tornando essa
                            transiçao mais fácil e suave para a sua equipe.</p>

                        <p id="content-tree" class="content tree">Podemos ajudar a migrar seus aplicativos para a Origiweb, tornando essa
                            transiçao mais fácil e suave para a sua equipe.</p>

                        <p id="content-for" class="content four">Podemos ajudar a migrar seus aplicativos para a Origiweb, tornando essa
                            transiçao mais fácil e suave para a sua equipe.</p>
                    </div>
                </div>

JS:

<script>
    function change(val) {
        var x = document.getElementsByClassName('content');
        for(var i = 0; i < x.length; i++) x[i].style.display = 'none';
        document.getElementById('content'+val).style.display = 'block';
    }
</script>

Erro do console: inserir a descrição da imagem aqui

1 Resposta 1

2

ONMOUSEOVER

A abordagem mais direta, através de JavaScript puro, utiliza onmouseover para chamar uma função e, dessa forma, alterar a exibição dos itens:

function mudar(val) {
  var x = document.getElementsByClassName('conteudo');
  for(var i = 0; i < x.length; i++) x[i].style.display = 'none';
  document.getElementById('conteudo'+val).style.display = 'block';  
}
.conteudo {
  display: none;
}

#conteudo1 {
  display: block;
}
<p onmouseover="mudar(1)" id="p1">Passe o mouse aqui</p>
<p onmouseover="mudar(2)" id="p2">Passe o mouse aqui</p>
<p onmouseover="mudar(3)" id="p3">Passe o mouse aqui</p>
<p onmouseover="mudar(4)" id="p4">Passe o mouse aqui</p>

<div id="conteudo">
   <div id="conteudo1" class="conteudo um">Conteúdo 1</div>
   <div id="conteudo2" class="conteudo dois">Conteúdo 2</div>
   <div id="conteudo3" class="conteudo tres">Conteúdo 3</div>
   <div id="conteudo4" class="conteudo quatro">Conteúdo 4</div>
</div>

8
  • Amigo obrigado pela resposta so uma coisa esse js tem que estar no head ou body la em baixo ? 14/02/2017 às 17:46
  • Uma boa prática, na verdade, é usar os scripts logo antes do fechamento do </body>, poucos casos que não seguem essa regra. 14/02/2017 às 17:48
  • @Kirito se estiver correto pra ti, marca como correto, para ajudar outras pessoas também, um abraço! 14/02/2017 às 17:49
  • só uma coisa essa tag <p onmouseover="mudar(1)" id="p1"> vou trocar por essa <div onmouseover="mudar(2)" class="service -bg" id="p2"> não tem probelma ser uma div certo ? ou tem que ser um <p> 14/02/2017 às 17:51
  • Pode ser qualquer TAG, inclusive <img>, <span>, <a>... Só o valor 2, dentro da função mudar(2) eu uso para chamar a div conteudo2, se fosse 3 chamaria a 3 e assim por diante, tu compreendeu a lógica? 14/02/2017 às 17: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 .