Change content by hovering the mouse on a div

Question

Change content by hovering the mouse on a div

Navigation

#1 by (2 votes)

0

I need to make when hovering on a div it changes the content on the side theimageexplainswellhowtheprocessshouldbedonewhenhoveringoverthedivshouldchangethetextsonthesidewouldliketoknowifitispossibletodothiswithhoverfollowmycode:

<divclass="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:

html5 twitter-bootstrap less

asked by anonymous 14.02.2017 / 17:52

1 answer

throw new \ Exception in PHP Parse error: syntax error, unexpected end of file [duplicate]

score 2 · Accepted Answer

ONMOUSEOVER

The most direct approach, using pure JavaScript, uses onmouseover to call a function and thus 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>