问题
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 eventually led me here.
I have a page, with images layed out in a grid. on the top of the page there's a header and in the bottom, there's a footer. at this point text, in block-colors, appears in the footer, when an element in the grid is hovered.
What I wish to archieve now, is that the text-color of the header will also change accordingy and get the color of the text in the footer.
I have been trying to do this through both css and Jquery, but up untill now, with no luck.
$(".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>More specifically I wish that all the content in the div "contact" changes acording to which element is hovered #item_2, #item_3, #item_4 etc.
回答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: 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>回答2:
Your code is quite long and complex, so I've created a slightly simpler example, which hopefully still does what you want.
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>来源：https://stackoverflow.com/questions/61480528/changing-text-color-of-one-div-when-other-div-is-hovered