- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 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 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/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/
我尝试理解[c代码 -> 汇编]代码 void node::Check( data & _data1, vector& _data2) { -> push ebp -> mov ebp,esp ->
我需要在当前表单(代码)的上下文中运行文本文件中的代码。其中一项要求是让代码创建新控件并将其添加到当前窗体。 例如,在Form1.cs中: using System.Windows.Forms; ..
我有此 C++ 代码并将其转换为 C# (.net Framework 4) 代码。有没有人给我一些关于 malloc、free 和 sprintf 方法的提示? int monate = ee; d
我的网络服务器代码有问题 #include #include #include #include #include #include #include int
给定以下 html 代码,将列表中的第三个元素(即“美丽”一词)以斜体显示的 CSS 代码是什么?当然,我可以给这个元素一个 id 或一个 class,但 html 代码必须保持不变。谢谢
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 7 年前。
我试图制作一个宏来避免重复代码和注释。 我试过这个: #define GrowOnPage(any Page, any Component) Component.Width := Page.Surfa
我正在尝试将我的旧 C++ 代码“翻译”成头条新闻所暗示的 C# 代码。问题是我是 C# 中的新手,并不是所有的东西都像 C++ 中那样。在 C++ 中这些解决方案运行良好,但在 C# 中只是不能。我
在 Windows 10 上工作,R 语言的格式化程序似乎没有在 Visual Studio Code 中完成它的工作。我试过R support for Visual Studio Code和 R-T
我正在处理一些报告(计数),我必须获取不同参数的计数。非常简单但乏味。 一个参数的示例查询: qCountsEmployee = ( "select count(*) from %s wher
最近几天我尝试从 d00m 调试网络错误。我开始用尽想法/线索,我希望其他 SO 用户拥有可能有用的宝贵经验。我希望能够提供所有相关信息,但我个人无法控制服务器环境。 整个事情始于用户注意到我们应用程
我有一个 app.js 文件,其中包含如下 dojo amd 模式代码: require(["dojo/dom", ..], function(dom){ dom.byId('someId').i
我对“-gencode”语句中的“code=sm_X”选项有点困惑。 一个例子:NVCC 编译器选项有什么作用 -gencode arch=compute_13,code=sm_13 嵌入库中? 只有
我为我的表格使用 X-editable 框架。 但是我有一些问题。 $(document).ready(function() { $('.access').editable({
我一直在通过本教程学习 flask/python http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-wo
我想将 Vim 和 EMACS 用于 CNC、G 代码和 M 代码。 Vim 或 EMACS 是否有任何语法或模式来处理这种类型的代码? 最佳答案 一些快速搜索使我找到了 this vim 和 thi
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 想改进这个问题?更新问题,使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve this
这个问题在这里已经有了答案: Enabling markdown highlighting in Vim (5 个回答) 6年前关闭。 当我在 Vim 中编辑包含 Markdown 代码的 READM
我正在 Swift3 iOS 中开发视频应用程序。基本上我必须将视频 Assets 和音频与淡入淡出效果合并为一个并将其保存到 iPhone 画廊。为此,我使用以下方法: private func d
pipeline { agent any stages { stage('Build') { steps { e
我是一名优秀的程序员,十分优秀!