悬停另一个div时更改一个div的文本颜色 [英] Changing text-color of one div when other div is hovered

查看:59
本文介绍了悬停另一个div时更改一个div的文本颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我遇到了一个问题,我认为应该没有那么难,但是在这一点上,我已经在教程中爬了好几个小时而没有找到结果-最终使我来到了这里.">

我有一个页面,图像以网格形式布置.页面顶部有页眉,底部有页脚.此时,当将网格中的元素悬停时,文本将以块色显示在页脚中.

我现在想归档的是,页眉的文本颜色也将相应地更改,并在页脚中获得文本的颜色.

我一直在尝试通过CSS和Jquery来做到这一点,但是直到现在,还是没有运气.

  $(.item-1").hover(function(){$('#text_1').toggleClass('hide_default');}, 功能(){$('#text_1').toggleClass('hide_default');});$(.item-2").hover(function(){$('#text_2').toggleClass('hide_default');}, 功能(){$('#text_2').toggleClass('hide_default');});$(.item-3").hover(function(){$('#text_3').toggleClass('hide_default');}, 功能(){$('#text_3').toggleClass('hide_default');});$(.item-4").hover(function(){$('#text_4').toggleClass('hide_default');}, 功能(){$('#text_4').toggleClass('hide_default');});$(.item-5").hover(function(){$('#text_5').toggleClass('hide_default');}, 功能(){$('#text_5').toggleClass('hide_default');});$(.item-6").hover(function(){$('#text_6').toggleClass('hide_default');}, 功能(){$('#text_6').toggleClass('hide_default');});$(.item-7").hover(function(){$('#text_7').toggleClass('hide_default');}, 功能(){$('#text_7').toggleClass('hide_default');});$(.item-8").hover(function(){$('#text_8').toggleClass('hide_default');}, 功能(){$('#text_8').toggleClass('hide_default');});$(.item-9").hover(function(){$('#text_9').toggleClass('hide_default');}, 功能(){$('#text_9').toggleClass('hide_default');});$(.item-10").hover(function(){$('#text_10').toggleClass('hide_default');}, 功能(){$('#text_10').toggleClass('hide_default');});$(.item-11").hover(function(){$('#text_11').toggleClass('hide_default');}, 功能(){$('#text_11').toggleClass('hide_default');});$(.item-12").hover(function(){$('#text_12').toggleClass('hide_default');}, 功能(){$('#text_12').toggleClass('hide_default');});  

 /*正文*/* {保证金:o;填充:o;}html,正文{保证金:0;填充:0;}/*标头*/#主要的{溢出:自动;边距顶部:25像素;底边距:50px;}/*联系人*/#接触{文本对齐:居中;底边距:25px;font-size:15px;字体家族:"Times New Roman";红色;}#关于{边距:50px;}/*滑块*/.slider {背景颜色:白色;颜色:#000;最低高度:100像素;边距顶部:-100px;清楚:两者;过渡:全1;溢出:隐藏;border-top:1px实心#e6e6e6;位置:固定;z-index:10001;左:0;正确:0;底部:0;填充:0 18px;过渡:转换300毫秒缓解;}/*新滑块*/#container_1 {显示:网格;网格模板列:25%25%25%25%;证明项目:中心;网格间隙:1em;}.hide_default {显示:无;}  

 <!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><身体>< div id ="main">< div id ="contact">< div class ="item item-1">索非亚·波多尼(Sofia Bordoni)& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;sofiabordoni@gmail.com& 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;关于</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床上用品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">我爱我的童年记忆,里面充满了色彩,纸张,铅笔和手工作品.对各种创意领域产生迷恋.摄影,开发模拟照片.建筑,将建筑物视为形状,体积和材料组合.排版,以及将字母视为具有牢固字符的形状.在意识到图形设计是能够将所有这些激情融为一体的领域之后,我热情地跟随了他们.</p>< p class ="hide_default" id ="text_2" style ="color:blue">蜡烛,诺曼·哥本哈根.</p>< p class ="hide_default" id ="text_3" style ="color:#ff6699">圣诞明信片,哥本哈根诺曼.</p>< p class ="hide_default" id ="text_4" style ="color:#00cc66">运动,哥本哈根建筑节.</p>< p class ="hide_default" id ="text_5" style ="color:#33cc33">出版,社论设计.</p>< p class ="hide_default" id ="text_6" style ="color:#9966ff">纺织品设计,诺曼哥本哈根.</p>< p class ="hide_default" id ="text_7" style ="color:#00cc66">纺织品设计,诺曼哥本哈根.</p>< p class ="hide_default" id ="text_8" style ="color:#3399ff">海报设计,联合国教科文组织博物馆.</p>< p class ="hide_default" id ="text_9" style ="color:#00cc99">明信片,诺曼·哥本哈根.</p>< p class ="hide_default" id ="text_10" style ="color:#ff9900">明信片,诺曼·哥本哈根.</p>< p class ="hide_default" id ="text_11" style ="color:#3366ff">产品品牌,Hay.</p>< p class ="hide_default" id ="text_12" style ="color:#00cc66">明信片,诺曼·哥本哈根.</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等悬停在哪个元素上进行更改.

解决方案

您的首要任务应该是使 hover()逻辑干燥.您可以通过使用 .item 类并添加 data 属性(包含用于相关内容的选择器)来对其进行通用化.

从那里,您可以简单地设置 #contact 元素的 color 以匹配所显示目标的 color .试试这个:

  let $ contact = $('#contact');$('.item').hover(function(){让$ target = $($(this).data('target')).toggleClass('hide_default');$('#contact').css('color',$ target.css('color'));});  

  * {保证金:o;填充:o;}html,身体 {边距:0;填充:0;}#主要的 {溢出:自动;边距顶部:25像素;底边距:50px;}#接触 {文本对齐:居中;底边距:25px;font-size:15px;字体家族:"Times New Roman";红色;}#关于 {边距:50px;}.slider {背景颜色:白色;颜色:#000;最低高度:100像素;边距顶部:-100px;清楚:两者;过渡:全1;溢出:隐藏;border-top:1px实心#e6e6e6;位置:固定;z-index:10001;左:0;正确:0;底部:0;填充:0 18px;过渡:转换300毫秒缓解;最大高度:100vh;max-height:70px;}/*新滑块*/#container_1 {显示:网格;网格模板列:25%25%25%25%;证明项目:中心;网格间隙:1em;}.hide_default {显示:无;}  

 < 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;sofiabordoni@gmail.com& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;0045& nbsp;                                                & nbsp;& nbsp;& nbsp;& nbsp;关于</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亚麻布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;">我热爱我的童年,那里充满了色彩,纸张,铅笔和手工作品.对各种创意领域产生迷恋.摄影,开发模拟照片.建筑,将建筑物视为形状,体积和材料组合.排版,以及将字母视为具有牢固字符的形状.在意识到图形设计是能够将所有这些激情汇集在一起​​的领域之后,我热情地跟随了他们.< p class ="hide_default" id ="text_2" style ="color:blue;">蜡烛,诺曼·哥本哈根.< p class ="hide_default" id ="text_3" style ="color:#ff6699;">圣诞节明信片,诺曼·哥本哈根.< p class ="hide_default" id ="text_4" style ="color:#00cc66;">战役,哥本哈根建筑节.< p class ="hide_default" id ="text_5" style ="color:#33cc33;">出版物,社论设计.</p>< p class ="hide_default" id ="text_6" style ="color:#9966ff;">纺织品设计,诺曼·哥本哈根.< p class ="hide_default" id ="text_7" style ="color:#00cc66;">纺织品设计,诺曼·哥本哈根(Normann Copenhagen).< p class ="hide_default" id ="text_8" style ="color:#3399ff;">海报设计,美国博物馆.< p class ="hide_default" id ="text_9" style ="color:#00cc99;">明信片,诺曼·哥本哈根.< p class ="hide_default" id ="text_10" style ="color:#ff9900;">明信片,诺曼·哥本哈根.< p class ="hide_default" id ="text_11" style ="color:#3366ff;">产品品牌Hay.< p class ="hide_default" id ="text_12" style ="color:#00cc66;">明信片,诺曼·哥本哈根(Normann Copenhagen).< p class ="hide_default" id ="text_13" style ="color:#ffff00;">曼尼·德托(Mani Sito),Drogheria Creativa.</div>  

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
				               &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>

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.

解决方案

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 &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的文本颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆