Problem in code

I know that you are a beginner in JavaScript but since you are using Bootstrap, I suggest that you abandon the use of inline events as onmousemove , onmouseout , onclick etc. right into the tags and use jQuery code, since Bootstrap needs it.

Place the code inside the function of event ready :

$(document).ready(function(){
   // CÓDIGO AQUI
});

This gives the code a bit more security because it is restricted in scope, and the events in the tags will not be reachable. For example:

<div onmouseover="funcao()">Texto</div>

$(document).ready(function(){

   function funcao(){
      alert("olá");
   }

});

It will result in an error because the funcao() function is out of reach of onmouseover of div because it is restricted within the scope of the .ready function (it is good to learn about JavaScript scopes. there's a lot of stuff here).

In addition you are using events that are not appropriate for what you want. In this case, the most appropriate would be mouseenter (when the mouse "enters") and mouseleave (when the mouse "exits"). Does mousemove also work? Running works, but it will trigger the event all the time the mouse moves over the element, and what you want is for an event to be fired just once, like the two events I mentioned.

So you can use a selector that will check the events only on the interested divs and listen for the two events of interest. Depending on the triggered event, you can modify the contents of the div that triggered the event.

For this I created 3 variables without values that will save the original HTML of the divs when the mouse goes over each one, and when you remove the mouse, the function of the events will return the original HTML.

See in the example HTML below that you do not even need to use id s for each div, you can use the same classes to select each.

Use the dataset attribute, where you put the value you want for each element and can get that value in the script and place it inside the div:

data-*

Where * you replace with a non-unique identifier. In this case I put data-link .

I've added some comments in the code to help with understanding:

$(document).ready(function(){

   // define as variáveis que irão guardar o HTML original de cada div
   var linkedin_txt, email_txt, whatsapp_txt;
   
   $("#contato div.card div").on("mouseenter mouseleave", function(ev){
         
      var el = $(this); // elemento
      
      // ev.type é o tipo de evento, que pode ser mouseenter ou mouseleave
      if(ev.type == "mouseenter"){
         
         var h = el.html(); // HTML do elemento
      
         // salva o HTML original de cada div
         if(el.hasClass("card-header")) linkedin_txt = h;
         if(el.hasClass("card-body"))   email_txt    = h;
         if(el.hasClass("card-footer")) whatsapp_txt = h;
         
         // altera o HTML do elemento
         el.html(el.data("link"));
   
      }else{
   
         if(el.hasClass("card-header")) var padrao = linkedin_txt;
         if(el.hasClass("card-body"))   var padrao = email_txt;
         if(el.hasClass("card-footer")) var padrao = whatsapp_txt;
         
         // restaura a div como era antes
         el.html(padrao);
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<section id="contato">
    <h2>Contato</h2>
    <div class="card bg-info" style="width: 40rem;">
        <div class="card-header" data-link="Linkedin.com"><i style="font-size:24px" class="fas fa-phone fa-lg"></i>Linkedin</div>
        <div class="card-body" data-link="[email protected]"><i style="font-size:24px" class="fa">&#xf0e0;</i>Email</div>
        <div class="card-footer" data-link="123456789"><i style="font-size:24px" class="fab fa-whatsapp"></i>Whatssap</div>
    </div>

</section>

  

The code can still be much more optimized, but I did it in a way   easier way to read, not to be too complex to understand.

The correct way is to use the events mouseenter and mouseleave, the event mouseenter and fired when you enter the mouse in the element, already the element mouseleave when you leave with the mouse of the element.