【发布时间】：2020-08-12 06:51:41
【问题描述】：
我遇到了一个问题，在我看来这不应该那么难，但在这一点上，我已经在教程中点击了几个小时，但没有找到结果 - 然后最终把我带到了这里。
我有一个页面，图像以网格形式排列。页面顶部有页眉，底部有页脚。此时，当网格中的元素悬停时，文本以块颜色出现在页脚中。
我现在想要归档的是，页眉的文本颜色也会相应地改变，并获得页脚中文本的颜色。
我一直在尝试通过 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
sofiabordoni@gmail.com
0045 9164 6938
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“联系人”中的所有内容都根据悬停的元素而改变 #item_2、#item_3、#item_4 等。
【问题讨论】：
标签： javascript jquery css header hover