Change content by hovering over a div

Question

People need to make sure that when you mouse(Hover) in a div she changes the contents of the side the image explains well how the process should be done when hovering over the div should exchange the texts on the side would like to know if it is possible to do this with hover follows my code:

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

Console error:

Answer 1

ONMOUSEOVER

The most direct approach, through pure Javascript, uses onmouseover to call a function and thereby change the display of items:

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>