当前，我在我的页面上有一个外部脚本，该脚本会导致div“ contact”内的文本根据悬浮的“ item”元素而改变颜色。现在，我希望以后不仅可以更改颜色，而且可以更改菜单div和课程表div以及其他任何div，不仅是contact div可以更改颜色。我还尝试了更改当前的javascript为了做到这一点，通过添加另一个let变量并将其包含在脚本中，但是直到这一点为止，一切都还没有完成。我目前正在研究我的JavaScript，以便能够进行这些更改。但是也许有人可以告诉我是否以最干净的方式完成？
let $contact = $('#contact');
$('.item').hover(function() {
let $target = $($(this).data('target')).toggleClass('hide_default');
$('#contact').css('color', $target.css('color'));
});/* Body */
* {
margin: auto;
padding: 0;
box-sizing: border-box;
}
/* Header */
#main{
overflow: auto;
margin-top: 25px;
margin-bottom: 50px;
}
/* Contacts */
#contact{
text-align: center;
margin-bottom: 25px;
font-size: 45px;
font-family: 'Times New Roman';
color: red;
cursor: pointer;
}
#About{
margin: 50px;
}
#container_1{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
margin-top: 40px;
margin-bottom: 500px;
}
#container_1 > * {
height: 10vh;
margin: 12rem;
position: center;
}
.hide_default {
display: none;
}
/* Slider */
.slider {
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-size: 45px;
float: left;
height: 260px;
background-color: #fff;
border-top: 1px solid #e6e6e6;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
}
.nav-bar-column-1 {
margin-top: 100px;
margin-bottom: 50px;
width: 100px;
margin-right: 160px;
margin-left: 160px;
}
.nav-bar-column-2 {
margin-top: 100px;
margin-bottom: 50px;
width: 700px;
margin-right: 160px;
margin-left: 160px;
}
.nav-bar-column-3 {
margin-top: 100px;
margin-bottom: 50px;
width: 700px;
margin-right: 160px;
margin-left: 160px;
}
/* Curriculum-Div */
.Curriculum-Div {
display: flex;
flex-direction: row;
justify-content: space-around;
color: red;
font-size: 35px;
background-color: #fff;
border-top: 1px solid #e6e6e6;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
}
.Curriculum-Titles {
font-size: 45px;
}
.Sofiabordoni_Img {
width: 400px;
}
#curriculum-column-1 {
margin-top: 100px;
margin-bottom: 50px;
padding: 50px;
width: 20%;
margin-top: 100px;
}
#curriculum-column-2 {
margin-top: 100px;
margin-bottom: 50px;
padding: 50px;
width: 20%;
}
#curriculum-column-3 {
margin-top: 100px;
margin-bottom: 50px;
padding: 50px;
width: 20%;
}
#curriculum-column-4 {
margin-top: 100px;
margin-bottom: 50px;
padding: 50px;
width: 20%;
}
#curriculum-column-5 {
margin-top: 100px;
margin-bottom: 50px;
padding: 50px;
width: 20%;
}
/* Media-queries */
@media only screen and (max-width: 768px){
#main{
margin-top: 0px;
margin-bottom: 0px;
}
#container_1{
justify-content: space-start;
}
#container_1 > * {
margin: 0rem;
justify-content: space-start;
margin-bottom: 500px;
margin-bottom: 500px;
}
#contact{
text-align: left;
font-size: 20px;
margin-top: 25px;
margin-left: 5px;
width: 75%;
}
.Image {
width: 400px;
}
/* Media-queries fo Slider */
.slider {
font-size: 20px;
height: 100px;
padding-bottom: 20px;
}
.nav-bar-column-1 {
margin-top: 5px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
}
.nav-bar-column-2 {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 5px;
margin-right: 5px;
}
.nav-bar-column-3 {
margin-top: 0px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}
/* Media-queries fo curriculum */
.Curriculum-Div {
flex-direction: column;
height: 650px;
overflow: auto;
font-size: 15px;
}
.Sofiabordoni_Img {
width: 100%;
}
.Curriculum-Titles {
font-size: 20px;
}
#curriculum-column-1 {
margin-top: 60px;
margin-bottom: 20px;
margin-left: 20px;
padding: 5px;
width: 90%;
}
#curriculum-column-2 {
padding: 5px;
width: 80%;
margin-left: 20px;
margin-bottom: 20px;
margin-top: 2px;
}
#curriculum-column-3 {
padding: 5px;
width: 80%;
margin-left: 20px;
margin-top: 2px;
margin-bottom: 20px;
}
#curriculum-column-4 {
padding: 5px;
width: 80%;
margin-left: 20px;
margin-top: 2px;
margin-bottom: 20px;
}
#curriculum-column-5 {
padding: 5px;
width: 80%;
margin-left: 20px;
margin-top: 2px;
}
}<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name= "viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="main">
<div id="contact">
Sofia Bordoni
<br>
[email protected]
0045 9164 6938
<span class="item item-1">
About
</span>
</div>
<div id="container_1">
<div class="item item-2" data-target="#text_2">
<img class="Image" src="Images/310500_Normann_Copenhagen_Snooze_Bed_Linen_Deep_Sleep_White_Eclat_Cushion_33x60cm_Rose_Multi.jpg" width="300px">
</div>
<div class="item item-3" data-target="#text_3">
<img class="Image" src="Images/Christmas Candle 20191-kopi kopi.png" width="400px">
</div>
<div class="item item-4" data-target="#text_4">
<img class="Image" src="Images/Happy-New-Year-NC.gif" width="650px">
</div>
<div class="item item-5" data-target="#text_5">
<img class="Image" src="Images/Normann-Anniversary-Cover_HomePage.jpg" width="450px">
</div>
<div class="item item-6" data-target="#text_6">
<img class="Image" src="Images/Skærmbillede 2020-05-08 kl. 10.16.16 kopi.png" width="300px">
</div>
<div class="item item-7" data-target="#text_7">
<img class="Image" src="Images/Tivoli.png" width="350px">
</div>
<div class="item item-8" data-target="#text_8">
<img class="Image" src="Images/Ren.gif" width="600px">
</div>
<div class="item item-9" data-target="#text_9">
<img class="Image" src="Images/6205_Normann_Copenhagen_Imprint_Towel_70x140cm_Group_01.jpg" width="350px">
</div>
<div class="item item-10" data-target="#text_10">
<img class="Image" src="Images/330393_Normann_Copenhagen_Christmas_Candle_2018_Black_01.jpg" width="400px">
</div>
<div class="item item-11" data-target="#text_11">
<img class="Image" src="Images/Holiday_Greeting_Main_NY.gif" width="650px">
</div>
<div class="item item-12" data-target="#text_12" >
<img class="Image" src="Images/Safari PSD Mockup_3.jpg" width="450px">
</div>
<div class="item item-13" data-target="#text_13" >
<img class="Image" src="Images/Asano Nielsen Design - Color Red.png" width="350px">
</div>
<div class="item item-14" data-target="#text_14" >
<img class="Image" src="Images/Papa-Blanket.gif" width="600px">
</div>
<div class="item item-15" data-target="#text_15" >
<img class="Image" src="Images/poster_mockup_MD1-kopi 3.jpg" width="350px">
</div>
<div class="item item-16" data-target="#text_16" >
<img class="Image" src="Images/Dizionari_DROGHERIA_CREATIVA_BAGLIONI.png" width="370px">
</div>
<div class="item item-17" data-target="#text_17" >
<img class="Image" src="Images/Skærmbillede 2020-05-07 kl. 19.17.28 kopi.png" width="380px">
</div>
<div class="item item-18" data-target="#text_18" >
<img class="Image" src="Images/Skærmbillede 2020-05-07 kl. 19.15.01 kopi.png" width="380px">
</div>
<div class="item item-19" data-target="#text_19" >
<img class="Image" src="Images/milano4you.png" width="450px">
</div>
<div class="item item-20" data-target="#text_20" >
<img class="Image" src="Images/Skærmbillede 2020-05-07 kl. 19.13.53 kopi.png" width="290px">
</div>
<div class="item item-21" data-target="#text_21" >
<img class="Image" src="Images/grido_leggero-kopi 3.jpg" width="420px">
</div>
</div>
</div>
<div class="slider">
<div class="nav-bar-column-1">
<div id="Menu">
Menu:
</div>
</div>
<div class="nav-bar-column-2">
<div id="text_2" class="hide_default" style="color: #26e08c">
Category:
<em class="color--category">
Textile design
</em>
</div>
<div id="text_3" class="hide_default" style="color: #ff6699">
Category:
<em class="color--category">
Objects
</em>
</div>
<div id="text_4" class="hide_default" style="color: #00cc66">
Category:
<em class="color--category">
Campaign
</em>
</div>
<div id="text_5" class="hide_default" style="color: #33cc33">
Category:
<em class="color--category">
Campaign
</em>
</div>
<div id="text_6" class="hide_default" style="color: #9966ff">
Category:
<em class="color--category">
Editorial design
</em>
</div>
<div id="text_7" class="hide_default" style="color:#e06726">
Category:
<em class="color--category">
Editorial design
</em>
</div>
<div id="text_8" class="hide_default" style="color: #3399ff">
Category:
<em class="color--category">
Textile design
</em>
</div>
<div id="text_9" class="hide_default" style="color: #00cc99">
Category:
<em class="color--category">
Textile design
</em>
</div>
<div id="text_10" class="hide_default" style="color: #ff9900">
Category:
<em class="color--category">
Object
</em>
</div>
<div id="text_11" class="hide_default" style="color: #3366ff">
Category:
<em class="color--category">
Campaign
</em>
</div>
<div id="text_12" class="hide_default" style="color:#5fe39f">
Category:
<em class="color--category">
Webdesign
</em>
</div>
<div id="text_13" class="hide_default" style="color: #056bfa">
Category:
<em class="color--category">
Campaign
</em>
</div>
<div id="text_14" class="hide_default" style="color: #e026b8">
Category:
<em class="color--category">
Textile design
</em>
</div>
<div id="text_15" class="hide_default" style="color: #e35f98">
Category:
<em class="color--category">
Campaign
</em>
</div>
<div id="text_16" class="hide_default" style="color: #32a852">
Category:
<em class="color--category">
Editorial design
</em>
</div>
<div id="text_17" class="hide_default" style="color: #4287f5">
Category:
<em class="color--category">
Branding
</em>
</div>
<div id="text_18" class="hide_default" style="color: #63f542">
Category:
<em class="color--category">
Editorial design
</em>
</div>
<div id="text_19" class="hide_default" style="color: #9942f5">
Category:
<em class="color--category">
Campaign
</em>
</div>
<div id="text_20" class="hide_default" style="color: #e02626">
Category:
<em class="color--category">
Editorial
</em>
</div>
<div id="text_21" class="hide_default" style="color: #e026b8">
Category:
<em class="color--category">
Campaign
</em>
</div>
</div>
<div class="nav-bar-column-3">
<div id="text_2-2" class="hide_default" style="color: #26e08c">
Project:
<em class="color--category">
Bed Linen - Mood
</em>
</div>
<div id="text_3-2" class="hide_default" style="color: #ff6699">
Project:
<em class="color--category">
Christmas Candle 2019
</em>
</div>
<div id="text_4-2" class="hide_default" style="color: #00cc66">
Project:
<em class="color--category">
Christmas Campaign 2019.
</em>
</div>
<div id="text_5-2" class="hide_default" style="color: #33cc33">
Project:
<em class="color--category">
Anniversay Campaign.
</em>
</div>
<div id="text_6-2" class="hide_default" style="color: #9966ff">
Project:
<em class="color--category">
The Hyg Family Chair
</em>
</div>
<div id="text_7-2" class="hide_default" style="color:#e06726">
Project:
<em class="color--category">
Tivoli Catalogue
</em>
</div>
<div id="text_8-2" class="hide_default" style="color: #3399ff">
Project:
<em class="color--category">
The Ren Collection
</em>
</div>
<div id="text_9-2" class="hide_default" style="color: #00cc99">
Project:
<em class="color--category">
Imprint Towel
</em>
</div>
<div id="text_10-2" class="hide_default" style="color: #ff9900">
Project:
<em class="color--category">
Christmas Candle 2019
</em>
</div>
<div id="text_11-2" class="hide_default" style="color: #3366ff">
Project:
<em class="color--category">
Christmas Campaign 2019
</em>
</div>
<div id="text_12-2" class="hide_default" style="color: #5fe39f">
Project:
<em class="color--category">
Beta Factory
</em>
</div>
<div id="text_13-2" class="hide_default" style="color: #056bfa">
Project:
<em class="color--category">
Asano Nielsen Design
</em>
</div>
<div id="text_14-2" class="hide_default" style="color: #e026b8">
Project:
<em class="color--category">
Papa Blanket
</em>
</div>
<div id="text_15-2" class="hide_default" style="color: #e35f98">
Project:
<em class="color--category">
CAFX
</em>
</div>
<div id="text_16-2" class="hide_default" style="color: #32a852">
Project:
<em class="color--category">
Hotel Baglioni.
</em>
</div>
<div id="text_17-2" class="hide_default" style="color: #4287f5">
Project:
<em class="color--category">
Hay Kitchen Market
</em>
</div>
<div id="text_18-2" class="hide_default" style="color: #63f542">
Project:
<em class="color--category">
Varier Collection 2017
</em>
</div>
<div id="text_19-2" class="hide_default" style="color: #9942f5">
Project:
<em class="color--category">
Milano 4 You
</em>
</div>
<div id="text_20-2" class="hide_default" style="color: #e02626">
Project:
<em class="color--category">
Book series cinque + uno
</em>
</div>
<div id="text_21-2" class="hide_default" style="color: #e026b8">
Project:
<em class="color--category">
Grido Leggero
</em>
</div>
</div>
</div>
<div class="Curriculum-Div" style="display: none;">
<div id="curriculum-column-1">
<img class="Sofiabordoni_Img" src="Images/Sofia.png">
<br>
<br>
I love my childhood memories, which were filled with colors, papirs, pencils and handcraft works. I developed an obsession towards various kinds of creative fields: photography, developing analogue photos, architecture, - percieving buildings as shapes, volumes and combination of materials, as well as learning to look upon typography as shapes with entrenched characthers. When I realized that graphic design brought together all of these different passions of mine, I pursued it with enthusiasm.
</div>
<div id="curriculum-column-2">
<em class="Curriculum-Titles">
Education
</em>
<br>
<br>
<em>
2013
</em>
<br>
Scientific High School N. Tron Technology Plan
<br>
<br>
<em>
2016
</em>
<br>
University Architecture of Venice IUAV Industrial Design and Multimedia
<br>
<br>
<br>
<em class="Curriculum-Titles">
Interests
</em>
<br>
<br>
Graphic Design, Typography, Product Design, Textile, Accessories, Printing, Letterpress, Binding Architecture, Interior Design, Cultural Exhibitions, Art
Photography
<br>
<br>
<br>
<em class="Curriculum-Titles">
Collaborations
</em>
<br>
<br>
<em>
BetaFactory / UnderBroen CPH
</em>
<br>
Art direction / Graphic Designer <br>
September 2017 – Present
<br>
<br>
<em>
Drogheria Creativa
</em>
<br>
Art direction / Graphic Designer <br>
January 2018 – January 2019 <br>
Client: Baglioni Hotels <br>
</div>
<div id="curriculum-column-3">
<em class="Curriculum-Titles">
Experience
</em>
<br>
<br>
<em>
Normann Copenhagen
</em>
<br>
Graphic Product Designer<br>
May 2018 - Present
<br>
<br>
<em>
Copenhagen Architecture Festival
</em>
<br>
Graphic Product Designer <br>
January 2018 - May 2018
<br>
<br>
<em>
Clara von Zweigberg Studio
</em>
<br>
Graphic Designer Intern <br>
Jan 2017 - July 2017 <br>
Clients: HAY, Varier Furniture, Areaware
<br>
<br>
<em>
Studio FM Milano
</em>
<br>
Graphic Designer Intern <br>
Feb 2016 - July 2016 <br>
Clients: Poltrona Frau, Cassina, Tecno
<br>
<br>
<em>
Studio Anagramma
</em>
<br>
Graphic Designer Intern<br>
June 2015 - Aug 2015
<br>
<br>
<em>
Università di Architettura Venezia IUAV
</em>
<br>
Laboratory assistant <br>
Feb 2015 - May 2015
<br>
<br>
</div>
<div id="curriculum-column-4">
<em class="Curriculum-Titles">
Competences
</em>
<br>
<br>
<em>
Languages <br>
</em>
Italian (native), English (fluent), Danish (4th Module). <br>
<br>
<br>
<em>
Adobe Suite <br>
</em>
Indesign (expert), Illustrator (expert), Photoshop (expert), Lightroom (expert).
<br>
<br>
<em>
Operating systems <br>
</em>
Macintosh (expert), Windows (basic) <br>
<br>
<br>
<em>
Webprogramming <br>
</em>
HTML (basic), CSS (basic)
<br>
<br>
<em>
2D/3D modelling <br>
</em>
AutoCAD (basic), Rhinoceros (basic) <br>
</div>
<div id="curriculum-column-5">
<em class="Curriculum-Titles">
Workshop
</em>
<br>
<br>
<em>
Form Us With Love / BAUX (Svezia) <br>
</em>
16 June 2017
<br>
<br>
<em>
Touchpoint Design <br>
</em>
Left Loft / La Triennale di Milano <br>
12-13 Sept 2016
<br>
<br>
<em>
Welcome Design Workshop IUAV
</em>
<br>
Studio FM Milano / Sergio Menichelli <br>
September 2015
<br>
<br>
<em>
Schio Design Festival
</em>
<br>
Graphic & Product Designer<br>
Dec 2014 - Feb 2015
<br>
<br>
<em>
Workshop di Architettura Venezia IUAV
</em>
<br>
Professors Paolo Merlini<br>
July 2012
</div>
</div>
</div>
</div>
</div>
<script src="Onhover.js"></script>
<script src="HoverColor.js"></script>
<script src="Nav-Bar_expand.js"></script>
<script src="MenuHide.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>
<script>
const myLazyLoad = new LazyLoad ({
elements_selector: ".Image"
});
</script>
</body>
</html>不是仅将CCS应用于#contact元素，而是可以将jQuery选择器应用于多个元素，如下所示：
$("#contact, div, span, .whateverClass").css('color', #colorYouWant);