javascript - 将类添加到 javascript onhover 代码

标签 javascript jquery css

目前，我在我的页面中有一个外部脚本，它会导致 div“contact”内的文本根据悬停的“item”元素改变颜色。现在我希望不仅是“联系人 div 改变颜色，而且菜单 div 和类(class) div 以及任何其他 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> sofiabordoni@gmail.com &nbsp;&nbsp; 0045&nbsp;9164&nbsp;6938 &nbsp;&nbsp;
      <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:&nbsp;
        <em class="color--category">
												Textile design
											</em>
      </div>


      <div id="text_3" class="hide_default" style="color: #ff6699">
        Category:&nbsp;
        <em class="color--category">
												Objects
											</em>
      </div>


      <div id="text_4" class="hide_default" style="color: #00cc66">
        Category:&nbsp;
        <em class="color--category">
												Campaign
												</em>
      </div>

      <div id="text_5" class="hide_default" style="color: #33cc33">
        Category:&nbsp;
        <em class="color--category">
												Campaign
												</em>
      </div>

      <div id="text_6" class="hide_default" style="color: #9966ff">
        Category:&nbsp;
        <em class="color--category">
												Editorial design
												</em>
      </div>

      <div id="text_7" class="hide_default" style="color:#e06726">
        Category:&nbsp;
        <em class="color--category">
												Editorial design
												</em>
      </div>

      <div id="text_8" class="hide_default" style="color: #3399ff">
        Category:&nbsp;
        <em class="color--category">
												Textile design
												</em>
      </div>

      <div id="text_9" class="hide_default" style="color: #00cc99">
        Category:&nbsp;
        <em class="color--category">
												Textile design
												</em>
      </div>

      <div id="text_10" class="hide_default" style="color: #ff9900">
        Category:&nbsp;
        <em class="color--category">
												Object
												</em>
      </div>

      <div id="text_11" class="hide_default" style="color: #3366ff">
        Category:&nbsp;
        <em class="color--category">
												Campaign
												</em>
      </div>

      <div id="text_12" class="hide_default" style="color:#5fe39f">
        Category:&nbsp;
        <em class="color--category">
												Webdesign
												</em>
      </div>

      <div id="text_13" class="hide_default" style="color: #056bfa">
        Category:&nbsp;
        <em class="color--category">
												Campaign
												</em>
      </div>

      <div id="text_14" class="hide_default" style="color: #e026b8">
        Category:&nbsp;
        <em class="color--category">
												Textile design
												</em>
      </div>

      <div id="text_15" class="hide_default" style="color: #e35f98">
        Category:&nbsp;
        <em class="color--category">
												Campaign
												</em>
      </div>

      <div id="text_16" class="hide_default" style="color: #32a852">
        Category:&nbsp;
        <em class="color--category">
												Editorial design
												</em>
      </div>

      <div id="text_17" class="hide_default" style="color: #4287f5">
        Category:&nbsp;
        <em class="color--category">
												Branding
												</em>
      </div>

      <div id="text_18" class="hide_default" style="color: #63f542">
        Category:&nbsp;
        <em class="color--category">
												Editorial design
												</em>
      </div>

      <div id="text_19" class="hide_default" style="color: #9942f5">
        Category:&nbsp;
        <em class="color--category">
												Campaign
												</em>
      </div>

      <div id="text_20" class="hide_default" style="color: #e02626">
        Category:&nbsp;
        <em class="color--category">
												Editorial
												</em>
      </div>

      <div id="text_21" class="hide_default" style="color: #e026b8">
        Category:&nbsp;
        <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:&nbsp;
        <em class="color--category">
												Bed Linen - Mood
												</em>
      </div>

      <div id="text_3-2" class="hide_default" style="color: #ff6699">
        Project:&nbsp;
        <em class="color--category"> 
												Christmas Candle 2019
												</em>
      </div>

      <div id="text_4-2" class="hide_default" style="color: #00cc66">
        Project:&nbsp;
        <em class="color--category">
												Christmas Campaign 2019.
												</em>
      </div>

      <div id="text_5-2" class="hide_default" style="color: #33cc33">
        Project:&nbsp;
        <em class="color--category">
												Anniversay Campaign.
												</em>
      </div>


      <div id="text_6-2" class="hide_default" style="color: #9966ff">
        Project:&nbsp;
        <em class="color--category">
												The Hyg Family Chair
												</em>
      </div>

      <div id="text_7-2" class="hide_default" style="color:#e06726">
        Project:&nbsp;
        <em class="color--category">
												Tivoli Catalogue
												</em>
      </div>

      <div id="text_8-2" class="hide_default" style="color: #3399ff">
        Project:&nbsp;
        <em class="color--category">
												The Ren Collection
												</em>
      </div>

      <div id="text_9-2" class="hide_default" style="color: #00cc99">
        Project:&nbsp;
        <em class="color--category">
												Imprint Towel
												</em>
      </div>

      <div id="text_10-2" class="hide_default" style="color: #ff9900">
        Project:&nbsp;
        <em class="color--category">
												Christmas Candle 2019
												</em>
      </div>

      <div id="text_11-2" class="hide_default" style="color: #3366ff">
        Project:&nbsp;
        <em class="color--category">
												Christmas Campaign 2019
												</em>
      </div>

      <div id="text_12-2" class="hide_default" style="color: #5fe39f">
        Project:&nbsp;
        <em class="color--category">
												Beta Factory
												</em>
      </div>

      <div id="text_13-2" class="hide_default" style="color: #056bfa">
        Project:&nbsp;
        <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:&nbsp;
        <em class="color--category">
												CAFX
												</em>
      </div>

      <div id="text_16-2" class="hide_default" style="color: #32a852">
        Project:&nbsp;
        <em class="color--category">
												Hotel Baglioni.
												</em>
      </div>

      <div id="text_17-2" class="hide_default" style="color: #4287f5">
        Project:&nbsp;
        <em class="color--category">
												Hay Kitchen Market
												</em>
      </div>

      <div id="text_18-2" class="hide_default" style="color: #63f542">
        Project:&nbsp;
        <em class="color--category">
												Varier Collection 2017
												</em>
      </div>

      <div id="text_19-2" class="hide_default" style="color: #9942f5">
        Project:&nbsp;
        <em class="color--category">
												Milano 4 You
												</em>
      </div>

      <div id="text_20-2" class="hide_default" style="color: #e02626">
        Project:&nbsp;
        <em class="color--category">
												Book series cinque + uno
												</em>
      </div>

      <div id="text_21-2" class="hide_default" style="color: #e026b8">
        Project:&nbsp;
        <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/vanilla-lazyload@13.0.1/dist/lazyload.min.js"></script>

  <script>
    const myLazyLoad = new LazyLoad({
      elements_selector: ".Image"
    });
  </script>

</body>

</html>

最佳答案

您可以将 jQuery 选择器应用于多个元素，如下所示，而不是仅在 #contact 元素上应用 CCS:

$("#contact, div, span, .whateverClass").css('color', #colorYouWant);

关于javascript - 将类添加到 javascript onhover 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62043647/

上一篇：javascript - 在 jQuery 中添加或删除类

下一篇：javascript - 点击元素方式的图片

相关文章：

javascript - jQuery:循环遍历元素以创建组合变体

服务器上传后 JavaScript 不工作

javascript - jQuery Datepicker beforeShowDay 不工作

javascript - 滑动和淡出一个 div 元素

javascript - 如何强制水平滚动在 UI-GRID 上向右移动

javascript - Uncaught TypeError : children[i]. children is not a function

jquery - 如何使用jquery为动态附加元素添加点击事件？

jquery - 选择器性能 - 'E#id' 与 '#id' - 在 CSS 和 jQuery 中

javascript - html5 Canvas 中心圆

javascript - azure ARM 消耗: get consumption with a CSP subscription

©2024 IT工具网  联系我们