- 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/
我创建了一个用户可以添加测试的字段。这一切运行顺利我只希望当用户点击(添加另一个测试)然后上一个(添加另一个测试)删除并且这个显示在新字段中。 所有运行良好的唯一问题是点击(添加另一个字段)之前添加另
String[] option = {"Adlawan", "Angeles", "Arreza", "Benenoso", "Bermas", "Brebant
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a softwar
我正在努力将 jQuery 滚动功能添加到 nav-tab (Bootstrap 3)。我希望用户能够选择他们想要的选项卡,并在选项卡内容中有一个可以平滑滚动到 anchor 的链接。这是我的代码,可
我正在尝试在用户登录后再添加 2 个 ui 选项卡。首先,我尝试做一个之后。 $('#slideshow').tabs('remove', '4'); $("#slideshow ul li:last
我有一个包含选择元素的表单,我想通过选择添加和删除其中一些元素。这是html代码(这里也有jsfiddle http://jsfiddle.net/txhajy2w/):
正在写这个: view.backgroundColor = UIColor.white.withAlphaComponent(0.9) 等同于: view.backgroundColor = UICo
好的,如果其中有任何信息,我想将这些列添加到一起。所以说我有 账户 1 2 3 . 有 4 个帐户空间,但只有 3 个帐户。我如何创建 java 脚本来添加它。 最佳答案 Live Example H
我想知道是否有一种有效的预制算法来确定一组数字的和/差是否可以等于不同的数字。示例: 5、8、10、2,使用 + 或 - 等于 9。5 - 8 = -3 + 10 = 7 + 2 = 9 如果有一个预
我似乎有一个卡住的 git repo。它卡在所有基本的添加、提交命令上,git push 返回所有内容为最新的。 从其他帖子我已经完成了 git gc 和 git fsck/ 我认为基本的调试步骤是
我的 Oracle SQL 查询如下- Q1- select hca.account_number, hca.attribute3, SUM(rcl.extended_amou
我正在阅读 http://developer.apple.com/iphone/library/documentation/iPhone/Conceptual/iPhoneOSProgrammingG
我正在尝试添加一个“加载更多”按钮并限制下面的结果,这样投资组合页面中就不会同时加载 1000 个内容,如下所示:http://typesetdesign.com/portfolio/ 我对 PHP
我遇到这个问题,我添加了 8 个文本框,它工作正常,但是当我添加更多文本框(如 16 个文本框)时,它不会添加最后一个文本框。有人遇到过这个问题吗?提前致谢。 Live Link: JAVASCRIP
add/remove clone first row default not delete 添加/删除克隆第一行默认不删除&并获取正确的SrNo(例如:添加3行并在看到问题后删除SrNo.2)
我编码this ,但删除按钮不起作用。我在控制台中没有任何错误.. var counter = 0; var dataList = document.getElementById('materi
我有一个类似数组的对象: [1:数组[10]、2:数组[2]、3:数组[2]、4:数组[2]、5:数组[3]、6:数组[1]] 我正在尝试删除前两个元素,执行一些操作,然后将它们再次插入到同一位置。
使用的 Delphi 版本:2007 你好, 我有一个 Tecord 数组 TInfo = Record Name : String; Price : Integer; end; var Info
我使用了基本的 gridster 代码,然后我声明了通过按钮添加和删除小部件的函数它工作正常但是当我将调整大小功能添加到上面的代码中时,它都不起作用(我的意思是调整大小,添加和删除小部件) 我的js代
title 323 323 323 title 323 323 323 title 323 323 323 JS $(document).keydown(function(e){
我是一名优秀的程序员,十分优秀!