當另一個 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.