当另一个 div 悬停时更改一个 div 的文本颜色
Posted
技术标签:
【中文标题】当另一个 div 悬停时更改一个 div 的文本颜色【英文标题】：Changing text-color of one div when other div is hovered 【发布时间】：2020-08-12 06:51:41 【问题描述】：我遇到了一个问题，在我看来这不应该那么难，但在这一点上，我已经在教程中点击了几个小时，但没有找到结果 - 然后最终把我带到了这里。
我有一个页面，图像以网格形式排列。页面顶部有页眉，底部有页脚。此时，当网格中的元素悬停时，文本以块颜色出现在页脚中。
我现在想要归档的是，页眉的文本颜色也会相应地改变，并获得页脚中文本的颜色。
我一直在尝试通过 css 和 Jquery 来做到这一点，但到目前为止，没有运气。
$(".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
sofiabordoni@gmail.com
0045 9164 6938
About
</div>
</div>
<div id="container_1">
<div class="item item-2">
<img class="Image" src="Images/SgDOoMc9ShRg0Zpr.png" >
</div>
<div class="item item-3">
<img class="Image" src="Images/Merry Christmas NC.jpg" >
</div>
<div class="item item-4">
<img class="Image" src="Images/poster_mockup_MD1-kopi 2.jpg" >
</div>
<div class="item item-5">
<img class="Image" src="Images/2Tecnica_MENU_bAGLIONI_DROGHERIA_CREATIVA.jpg" >
</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" >
</div>
<div class="item item-7">
<img class="Image" src="Images/Snooze Bed Linen 200x2201.png" >
</div>
<div class="item item-8">
<img class="Image" src="Images/grido_leggero-kopi.jpg" >
</div>
<div class="item item-9">
<img class="Image" src="Images/Happy New Year NC.png" >
</div>
<div class="item item-10">
<img class="Image" src="Images/HAY.png" >
</div>
<div class="item item-11">
<img class="Image" src="Images/Holiday_Greeting_Main.png" >
</div>
<div class="item item-12">
<img class="Image" src="Images/mani-sito-kopi.jpg" >
</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>更具体地说，我希望 div“联系人”中的所有内容都根据悬停的元素而改变 #item_2、#item_3、#item_4 等。
【问题讨论】：
【参考方案1】：您的首要任务应该是干掉hover() 逻辑。您可以通过使用.item 类并添加一个包含相关内容选择器的data 属性来对其进行泛化。
从那里您可以简单地设置#contact 元素的color 以匹配正在显示的目标的color。试试这个：
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 sofiabordoni@gmail.com 0045 9164 6938
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>【讨论】：
这成功了！一旦我完成了一点点摆弄 - 非常感谢！【参考方案2】：您的代码又长又复杂，所以我创建了一个稍微简单的示例，希望它仍然可以满足您的需求。
function red()
document.getElementById('div2').style.color = 'red';
function notRed()
document.getElementById('div2').style.color = 'black';
<div id="div1" onmouseover="red()" onmouseout="notRed()">Hover over this div to make the other one go red!</div>
<div id="div2">This text will go red.</div>【讨论】：
很抱歉，但这并没有产生预期的效果。但是，我尝试以多种方式对其进行调整。 jsfiddle.net/7qm4byL1以上是关于当另一个 div 悬停时更改一个 div 的文本颜色的主要内容，如果未能解决你的问题，请参考以下文章