当另一个 div 悬停时更改一个 div 的文本颜色
[英]Changing text-color of one div when other div is hovered
问题描述
I've run into an issue, that in my opinion is not supposed to be so hard, but at this point 've been cliking through tutorials for hours, without finding results - which have then eventually led me here.
我遇到了一个问题，在我看来不应该那么难，但在这一点上，我已经在教程中点击了几个小时，但没有找到结果——这最终把我带到了这里。
I have a page, with images layed out in a grid.我有一个页面，图像以网格形式排列。 on the top of the page there's a header and in the bottom, there's a footer.在页面的顶部有一个 header 在底部有一个页脚。 at this point text, in block-colors, appears in the footer, when an element in the grid is hovered.此时，当网格中的元素悬停时，文本以块颜色出现在页脚中。
What I wish to archieve now, is that the text-color of the header will also change accordingy and get the color of the text in the footer.我现在想要归档的是 header 的文本颜色也会相应地改变并获得页脚中文本的颜色。
I have been trying to do this through both css and Jquery, but up untill now, with no luck.我一直在尝试通过 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" width="150px"> </div> <div class="item item-3"> <img class="Image" src="Images/Merry Christmas NC.jpg" width="150px"> </div> <div class="item item-4"> <img class="Image" src="Images/poster_mockup_MD1-kopi 2.jpg" width="150px"> </div> <div class="item item-5"> <img class="Image" src="Images/2Tecnica_MENU_bAGLIONI_DROGHERIA_CREATIVA.jpg" width="150px"> </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" width="150px"> </div> <div class="item item-7"> <img class="Image" src="Images/Snooze Bed Linen 200x2201.png" width="150px"> </div> <div class="item item-8"> <img class="Image" src="Images/grido_leggero-kopi.jpg" width="150px"> </div> <div class="item item-9"> <img class="Image" src="Images/Happy New Year NC.png" width="150px"> </div> <div class="item item-10"> <img class="Image" src="Images/HAY.png" width="150px"> </div> <div class="item item-11"> <img class="Image" src="Images/Holiday_Greeting_Main.png" width="150px"> </div> <div class="item item-12"> <img class="Image" src="Images/mani-sito-kopi:jpg" width="150px"> </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>
More specifically I wish that all the content in the div "contact" changes acording to which element is hovered #item_2, #item_3, #item_4 etc.更具体地说，我希望 div“联系人”中的所有内容都会根据悬停的元素 #item_2、#item_3、#item_4 等进行更改。
2 个解决方案
解决方案1
1 已采纳 2020-04-28 13:03:45
Your first task should be to DRY up the hover() logic.您的第一个任务应该是干掉hover()逻辑。 You can genericise it by using the .item class and adding a data attribute which holds the selector for the related content.您可以通过使用.item并添加包含相关内容选择器的data属性来对其进行通用化。
From there you can simply set the color of the #contact element to match the color of the target being displayed.从那里您可以简单地设置#contact元素的color以匹配正在显示的目标的color 。 Try this:尝试这个：
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
0 2020-04-28 12:56:55
Your code is quite long and complex, so I've created a slightly simpler example, which hopefully still does what you want.您的代码又长又复杂，所以我创建了一个稍微简单的示例，希望它仍然可以满足您的需求。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
当div悬停时更改图像 - Changing image when div is hovered
当页面上的链接悬停时，将一个 div 背景更改为多个图像 - Changing ONE div background to several images when links on page are hovered
将鼠标悬停在错误的 div 上时会改变颜色 - Wrong div changes color when hovered over
CSS 在另一个 div 悬停时更改单独 div 的背景颜色 - CSS change background color of seperate div when another div is hovered
当父 Div 悬停时更改子 Div 的背景颜色 - Change Background-Color of Child Div When Parent Div is Hovered
悬停DIV时文本框失去焦点 - Text box loses focus when DIV is hovered
悬停时对div进行动画处理 - Animating a div when hovered
如何在VS Code中将一个界面主题与其他文本颜色主题一起使用？ - How to use one interface theme with other text-color theme in VS Code?
当一个 div 位于另一个 div 之上时显示文本 - Appear text when one div is on top of the other
当两个div在移动设备中一个相对另一个放置时，如何使用CSS滚动悬停的div？ - How to scroll the hovered div using CSS when two divs are placed one over the other in mobile?
相关标签