Changing Text-color Of One Div When Other Div Is Hovered

I've run into an issue, that in my opinion is not supposed to be so hard, but at this point 've been cliking through tutorials for hours, without finding results - which have then

Solution 1:

Your first task should be to DRY up the hover() logic. You can genericise it by using the .item class and adding a data attribute which holds the selector for the related content.

From there you can simply set the color of the #contact element to match the color of the target being displayed. Try this:

let $contact = $('#contact');

$('.item').hover(function() {
  let $target = $($(this).data('target')).toggleClass('hide_default');
  $('#contact').css('color', $target.css('color'));
});

* {
  margin: o;
  padding: o;
}

html,
body {
  margin: 0;
  padding: 0;
}

#main {
  overflow: auto;
  margin-top: 25px;
  margin-bottom: 50px;
}

#contact {
  text-align: center;
  margin-bottom: 25px;
  font-size: 15px;
  font-family: 'Times New Roman';
  color: red;
}

#About {
  margin: 50px;
}


.slider {
  background-color: white;
  color: #000;
  min-height: 100px;
  margin-top: -100px;
  clear: both;
  transition: all 1s;
  overflow: hidden;
  border-top: 1px solid #e6e6e6;
  position: fixed;
  z-index: 10001;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 018px;
  transition: transform 300ms ease-out;
  max-height: 100vh; max-height:70px;
}


/* New slider */#container_1 {
  display: grid;
  grid-template-columns: 25%25%25%25%;
  justify-items: center;
  grid-gap: 1em;
}

.hide_default {
  display: none;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divid="main"><divid="contact"><divclass="item"data-target="item_1">
      Sofia Bordoni &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sofiabordoni@gmail.com &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0045 &nbsp;9164&nbsp;6938 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; About
    </div></div><divid="container_1"><divclass="item"data-target="#text_2"><imgclass="Image"src="Images/SgDOoMc9ShRg0Zpr.png" /></div><divclass="item"data-target="#text_3"><imgclass="Image"src="Images/Merry Christmas NC.jpg" /></div><divclass="item"data-target="#text_4"><imgclass="Image"src="Images/poster_mockup_MD1-kopi 2.jpg" /></div><divclass="item"data-target="#text_5"><imgclass="Image"src="Images/2Tecnica_MENU_bAGLIONI_DROGHERIA_CREATIVA.jpg" /></div><divclass="item"data-target="#text_6"><imgclass="Image"src="Images/2019_Normann_Copenhagen_Tap_Stool_Caramel_Walnut_Ren_Tea_Towel_Double_Grid_Dark_Blue_Cool_Grey_01.jpg" /></div><divclass="item"data-target="#text_7"><imgclass="Image"src="Images/Snooze Bed Linen 200x2201.png" /></div><divclass="item"data-target="#text_8"><imgclass="Image"src="Images/grido_leggero-kopi.jpg" /></div><divclass="item"data-target="#text_9"><imgclass="Image"src="Images/Happy New Year NC.png" /></div><divclass="item"data-target="#text_10"><imgclass="Image"src="Images/HAY.png" /></div><divclass="item"data-target="#text_11"><imgclass="Image"src="Images/Holiday_Greeting_Main.png" /></div><divclass="item"data-target="#text_12"><imgclass="Image"src="Images/mani-sito-kopi.jpg" /></div></div></div><divclass="slider"><pclass="hide_default"id="text_1"style="color: #3333ff;">I love the memory of my childhood, that was full of colors, paper, pencils, and handcraft works. Developing an obsession towards various creative fields. Photography, developing analog photos. Architecture, seeing buildings as shapes, volumes and material combinations. Typography, as well as observing letters as shapes with an entrenched character. Upon realizing that graphic design is the field that was capable to bring together all of these passions I followed them with enthusiasm.</p><pclass="hide_default"id="text_2"style="color: blue;">Candle, Normann Copenhagen.</p><pclass="hide_default"id="text_3"style="color: #ff6699;">Christmas Postcard, Normann Copenhagen.</p><pclass="hide_default"id="text_4"style="color: #00cc66;">Campaign, Copenhagen Architecture Festival.</p><pclass="hide_default"id="text_5"style="color: #33cc33;">Publication, Editorial design.</p><pclass="hide_default"id="text_6"style="color: #9966ff;">Textile design, Normann Copenhagen.</p><pclass="hide_default"id="text_7"style="color: #00cc66;">Textile design, Normann Copenhagen.</p><pclass="hide_default"id="text_8"style="color: #3399ff;">Poster design, Un Museo de Usare.</p><pclass="hide_default"id="text_9"style="color: #00cc99;">Postcard, Normann Copenhagen.</p><pclass="hide_default"id="text_10"style="color: #ff9900;">Postcard, Normann Copenhagen.</p><pclass="hide_default"id="text_11"style="color: #3366ff;">Product branding, Hay.</p><pclass="hide_default"id="text_12"style="color: #00cc66;">Postcard, Normann Copenhagen.</p><pclass="hide_default"id="text_13"style="color: #ffff00;">Mani Sito, Drogheria Creativa.</p></div>

Solution 2:

Your code is quite long and complex, so I've created a slightly simpler example, which hopefully still does what you want.

functionred() {
  document.getElementById('div2').style.color = 'red';
}

functionnotRed() {
  document.getElementById('div2').style.color = 'black';
}

<divid="div1"onmouseover="red()"onmouseout="notRed()">Hover over this div to make the other one go red!</div><divid="div2">This text will go red.</div>