悬停另一个 div 时更改一个 div 的文本颜色

Question

我运行遇到了一个问题，在我看来这不应该那么难，但此时我已经浏览了几个小时的教程，但没有找到结果 - 最后带我到这里。

我有一个页面，图像以网格形式排列。页面顶部有页眉，底部有页脚。此时，当网格中的元素悬停时，文本以块颜色显示在页脚中。

我现在想要实现的是，页眉的文本颜色也会相应地改变并获得页脚中文本的颜色。

我一直在尝试通过 css 和 Jquery 来做到这一点，但直到现在，还是没有成功。

$(".item-1").hover(function(){ 
    $('#text_1').toggleClass('hide_default');
 }, function(){
  $('#text_1').toggleClass('hide_default');
});

$(".item-2").hover(function(){ 
    $('#text_2').toggleClass('hide_default');
 }, function(){
  $('#text_2').toggleClass('hide_default');
});

$(".item-3").hover(function(){ 
    $('#text_3').toggleClass('hide_default');
 }, function(){
  $('#text_3').toggleClass('hide_default');
});

$(".item-4").hover(function(){ 
    $('#text_4').toggleClass('hide_default');
 }, function(){
  $('#text_4').toggleClass('hide_default');
});

$(".item-5").hover(function(){ 
    $('#text_5').toggleClass('hide_default');
 }, function(){
  $('#text_5').toggleClass('hide_default');
});

$(".item-6").hover(function(){ 
    $('#text_6').toggleClass('hide_default');
 }, function(){
  $('#text_6').toggleClass('hide_default');
});

$(".item-7").hover(function(){ 
    $('#text_7').toggleClass('hide_default');
 }, function(){
  $('#text_7').toggleClass('hide_default');
});

$(".item-8").hover(function(){ 
    $('#text_8').toggleClass('hide_default');
 }, function(){
  $('#text_8').toggleClass('hide_default');
});

$(".item-9").hover(function(){
    $('#text_9').toggleClass('hide_default');
 }, function(){
  $('#text_9').toggleClass('hide_default');
});

$(".item-10").hover(function(){ 
    $('#text_10').toggleClass('hide_default');
 }, function(){ 
  $('#text_10').toggleClass('hide_default');
});

$(".item-11").hover(function(){ 
    $('#text_11').toggleClass('hide_default');
 }, function(){
  $('#text_11').toggleClass('hide_default');
});

$(".item-12").hover(function(){ 
    $('#text_12').toggleClass('hide_default');
 }, function(){
  $('#text_12').toggleClass('hide_default');
});

/* Body */

* {
  margin: o;
  padding: o;
}

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

/* Header */

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

/* Contacts */

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


#About{
margin: 50px; 
}


/* Slider */

.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: 0 18px;
  transition: transform 300ms ease-out;
}



/* New slider */

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

.hide_default {
  display: none;
}

<!DOCTYPE html>
<html>
<head>
<title>Sofia Bordoni</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>


<div id="main">

          <div id="contact">
            <div class="item 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>
                

 
<div id="container_1">

   <div class="item item-2">

     <img class="Image" src="Images/SgDOoMc9ShRg0Zpr.png" width="150px">

   </div>

   <div class="item item-3">

    <img class="Image" src="Images/Merry Christmas NC.jpg" width="150px">
    
   </div>


   <div class="item item-4">

    <img class="Image" src="Images/poster_mockup_MD1-kopi 2.jpg" width="150px">
    
   </div>

   <div class="item item-5">

    <img class="Image" src="Images/2Tecnica_MENU_bAGLIONI_DROGHERIA_CREATIVA.jpg" width="150px">
    
   </div>

   <div class="item item-6">

    <img class="Image" src="Images/2019_Normann_Copenhagen_Tap_Stool_Caramel_Walnut_Ren_Tea_Towel_Double_Grid_Dark_Blue_Cool_Grey_01.jpg" width="150px">
    
   </div>

   <div class="item item-7">

    <img class="Image" src="Images/Snooze Bed Linen 200x2201.png" width="150px">
    
   </div>


   <div class="item item-8">

    <img class="Image" src="Images/grido_leggero-kopi.jpg" width="150px">
    
   </div>

   <div class="item item-9">

    <img class="Image" src="Images/Happy New Year NC.png" width="150px">
    
   </div>

   <div class="item item-10">

    <img class="Image" src="Images/HAY.png" width="150px">
    
   </div>

   <div class="item item-11">

    <img class="Image" src="Images/Holiday_Greeting_Main.png" width="150px">
    
   </div>

   <div class="item item-12">

    <img class="Image" src="Images/mani-sito-kopi.jpg" width="150px">
    
   </div>
 
 </div>
</div>

<div class="slider" style="max-height: 100vh max-height:70px;">

   <p class="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>


   <p class="hide_default" id="text_2" style="color: blue">
       
  Candle, Normann Copenhagen.
   </p>

   <p class="hide_default" id="text_3" style="color: #ff6699">
       
  Christmas Postcard, Normann Copenhagen.
   </p>

   <p class="hide_default" id="text_4" style="color: #00cc66">
       
  Campaign, Copenhagen Architecture Festival.
   </p>

   <p class="hide_default" id="text_5" style="color: #33cc33">
       
  Publication, Editorial design.
   </p>

   <p class="hide_default" id="text_6" style="color: #9966ff">
       
  Textile design, Normann Copenhagen.
   </p>

   <p class="hide_default" id="text_7" style="color:#00cc66">
       
  Textile design, Normann Copenhagen.
   </p>

   <p class="hide_default" id="text_8" style="color: #3399ff">
       
  Poster design, Un Museo de Usare.
   </p>

   <p class="hide_default" id="text_9" style="color: #00cc99">
       
  Postcard, Normann Copenhagen.
   </p>

   <p class="hide_default" id="text_10" style="color: #ff9900">
       
  Postcard, Normann Copenhagen.
   </p>

   <p class="hide_default" id="text_11" style="color: #3366ff">
       
  Product branding, Hay.
   </p>

   <p class="hide_default" id="text_12" style="color: #00cc66">
       
  Postcard, Normann Copenhagen.
   </p>

    <p class="hide_default" id="text_13" style="color:#ffff00">
       
  Mani Sito, Drogheria Creativa.
   </p>


</div>

 <script src="Onhover.js"></script>
 <script src="slider.js"></script>
 <script src="HoverColor.js"></script>
</body>

</html>

更具体地说，我希望 div "contact" 中的所有内容根据悬停的元素而变化 #item_2、#item_3、#item_4等

Answer 1

您的代码又长又复杂，所以我创建了一个稍微简单一些的示例，希望它仍然可以满足您的需求。

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

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

<div id="div1" onmouseover="red()" onmouseout="notRed()">Hover over this div to make the other one go red!</div>

<div id="div2">This text will go red.</div>

Answer 2

你的第一个任务应该是 DRY up hover() 逻辑。您可以通过使用 .item class 并添加一个 data 属性来通用化它，该属性包含相关内容的选择器。

从那里您可以简单地设置 #contact 元素的 color 以匹配正在显示的目标的 color。试试这个：

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: 0 18px;
  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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div id="contact">
    <div class="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>
  <div id="container_1">
    <div class="item" data-target="#text_2"><img class="Image" src="Images/SgDOoMc9ShRg0Zpr.png" /></div>
    <div class="item" data-target="#text_3"><img class="Image" src="Images/Merry Christmas NC.jpg" /></div>
    <div class="item" data-target="#text_4"><img class="Image" src="Images/poster_mockup_MD1-kopi 2.jpg" /></div>
    <div class="item" data-target="#text_5"><img class="Image" src="Images/2Tecnica_MENU_bAGLIONI_DROGHERIA_CREATIVA.jpg" /></div>
    <div class="item" data-target="#text_6"><img class="Image" src="Images/2019_Normann_Copenhagen_Tap_Stool_Caramel_Walnut_Ren_Tea_Towel_Double_Grid_Dark_Blue_Cool_Grey_01.jpg" /></div>
    <div class="item" data-target="#text_7"><img class="Image" src="Images/Snooze Bed Linen 200x2201.png" /></div>
    <div class="item" data-target="#text_8"><img class="Image" src="Images/grido_leggero-kopi.jpg" /></div>
    <div class="item" data-target="#text_9"><img class="Image" src="Images/Happy New Year NC.png" /></div>
    <div class="item" data-target="#text_10"><img class="Image" src="Images/HAY.png" /></div>
    <div class="item" data-target="#text_11"><img class="Image" src="Images/Holiday_Greeting_Main.png" /></div>
    <div class="item" data-target="#text_12"><img class="Image" src="Images/mani-sito-kopi.jpg" /></div>
  </div>
</div>
<div class="slider">
  <p class="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>
  <p class="hide_default" id="text_2" style="color: blue;">Candle, Normann Copenhagen.</p>
  <p class="hide_default" id="text_3" style="color: #ff6699;">Christmas Postcard, Normann Copenhagen.</p>
  <p class="hide_default" id="text_4" style="color: #00cc66;">Campaign, Copenhagen Architecture Festival.</p>
  <p class="hide_default" id="text_5" style="color: #33cc33;">Publication, Editorial design.</p>
  <p class="hide_default" id="text_6" style="color: #9966ff;">Textile design, Normann Copenhagen.</p>
  <p class="hide_default" id="text_7" style="color: #00cc66;">Textile design, Normann Copenhagen.</p>
  <p class="hide_default" id="text_8" style="color: #3399ff;">Poster design, Un Museo de Usare.</p>
  <p class="hide_default" id="text_9" style="color: #00cc99;">Postcard, Normann Copenhagen.</p>
  <p class="hide_default" id="text_10" style="color: #ff9900;">Postcard, Normann Copenhagen.</p>
  <p class="hide_default" id="text_11" style="color: #3366ff;">Product branding, Hay.</p>
  <p class="hide_default" id="text_12" style="color: #00cc66;">Postcard, Normann Copenhagen.</p>
  <p class="hide_default" id="text_13" style="color: #ffff00;">Mani Sito, Drogheria Creativa.</p>
</div>

悬停另一个 div 时更改一个 div 的文本颜色

Changing text-color of one div when other div is hovered

javascript

css

jquery

header

hover