当另一个 div 悬停时更改一个 div 的文本颜色
[英]Changing text-color of one div when other div is hovered
问题描述
我遇到了一个问题，在我看来不应该那么难，但在这一点上，我已经在教程中点击了几个小时，但没有找到结果——这最终把我带到了这里。
我有一个页面，图像以网格形式排列。 在页面的顶部有一个 header 在底部有一个页脚。 此时，当网格中的元素悬停时，文本以块颜色出现在页脚中。
我现在想要归档的是 header 的文本颜色也会相应地改变并获得页脚中文本的颜色。
我一直在尝试通过 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>
更具体地说，我希望 div“联系人”中的所有内容都会根据悬停的元素 #item_2、#item_3、#item_4 等进行更改。
2 个解决方案
解决方案1
1 已采纳 2020-04-28 13:03:45
您的第一个任务应该是干掉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
0 2020-04-28 12:56:55
您的代码又长又复杂，所以我创建了一个稍微简单的示例，希望它仍然可以满足您的需求。
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>
当页面上的链接悬停时，将一个 div 背景更改为多个图像
[英]Changing ONE div background to several images when links on page are hovered
CSS 在另一个 div 悬停时更改单独 div 的背景颜色
[英]CSS change background color of seperate div when another div is hovered
如何在VS Code中将一个界面主题与其他文本颜色主题一起使用？
[英]How to use one interface theme with other text-color theme in VS Code?
当两个div在移动设备中一个相对另一个放置时，如何使用CSS滚动悬停的div？
[英]How to scroll the hovered div using CSS when two divs are placed one over the other in mobile?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.