我遇到了一个问题，我认为应该没有那么难，但是在这一点上，“我已经在教程中爬了好几个小时而没有找到结果-最终使我来到了这里。” >
我有一个页面，图像以网格形式布置。在页面顶部有一个页眉，在底部有一个页脚。此时，当将网格中的元素悬停时，文本以方块颜色显示在页脚中。
我现在要归档的是，页眉的文本颜色也将相应地更改，并在页脚中获得文本的颜色。
我一直在尝试通过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等的哪个元素而变化。
答案 0 :(得分：1)
您的首要任务应该是使hover()逻辑干燥。您可以使用.item类并添加一个data属性来通用化它，该属性保存相关内容的选择器。
从那里，您可以简单地设置color元素的#contact以匹配要显示的目标的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 sofiabordoni@gmail.com 0045 9164 6938
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>
答案 1 :(得分：0)
您的代码很长很复杂，因此我创建了一个稍微简单的示例，希望它仍然可以满足您的要求。
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>