Я столкнулся с проблемой, которая, по моему мнению, не должна быть такой сложной, но в этот момент я несколько часов перебирал уроки, не находя результатов, что в конечном итоге привело меня сюда.
У меня есть страница с изображениями, расположенными в сетке. вверху страницы есть верхний колонтитул, а внизу нижний колонтитул. в этот момент текст, в цветах блока, появляется в нижнем колонтитуле, когда элемент в сетке наведен.
Что мне теперь нужно sh архивировать, так это то, что цвет текста заголовка также изменится соответственно и получит цвет текста в нижнем колонтитуле.
Я пытался сделать это через 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>
В частности, я sh уточняет, что все содержимое в div "contact" изменяется в зависимости от того, какой элемент находится в очереди # item_2, # item_3 , # item_4 et c.