如何將div疊加在另一個div上
[英]How to overlay div over another div
問題描述
我需要幫助將我的按鈕 div 覆蓋在另一個我的梯形上
我使用一個數組來存儲顏色然后使用 map function 到 map 每個按鈕對應的顏色類型。
當用戶將鼠標懸停在顏色按鈕上時，必須顯示為將計數器增加或減少 1，最小為 0。
必須始終顯示每種顏色的計數。 （輸入字段）
我當前的代碼在頁面底部實現了所有按鈕，但如上所述，我需要每個按鈕和計數器都覆蓋其相應的顏色，按鈕必須僅在用戶將鼠標懸停在顏色上時顯示，計數器必須始終是可見的。
請參閱下圖了解我要實現的目標：請參閱鏈接圖像圖像我應該使用 z-index: [number] 進行分層嗎？
這是我當前的代碼：
window.onload = function() { let colours = ["green", "brown", "blue", "yellow", "gold", "red"].map(id => { let colour = { elementCount: document.getElementById(id), elementPlus: document.getElementById(`${id}_plus`), elementMinus: document.getElementById(`${id}_minus`), counter: 0, }; colour.elementPlus.addEventListener("click", function() { colour.counter++; colour.elementCount.value = colour.counter; }); colour.elementMinus.addEventListener("click", function() { if (colour.counter > 0) { colour.counter--; colour.elementCount.value = colour.counter; } }); return colour; }); };
.pyramid { clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 100vmin; aspect-ratio: 9 / 15; background-color: white; display: grid; grid-template-columns: 1fr; }.pyramid > * { background: white; }.one { background-color: rgba(234, 27, 7, 0.97); }.two { background-color: rgba(244, 182, 0, 0.98); margin-top: 10px; }.three { background-color: rgba(249, 224, 41, 0.98); margin-top: 10px; }.four { background-color: rgba(4, 157, 252, 0.98); }.five { background-color: rgba(167, 118, 67, 0.99); gap: 0%;important. }:six { background-color, rgba(92, 213, 51. 0;98). },counter input[type=button]: input[type=text] { display; inline-block: width; 20px: background-color; transparent: outline; none: border; none: text-align; center: cursor; pointer: padding; 0px: color; black: height; 33px: font-family; 'Open Sans': } #container { width; 100px: height; 100px: position; relative, } #navi: #infoi { width; 100%: height; 100%: position; absolute: top; 0: left; 0: } #infoi { z-index; 10: } button { border-radius; 50%; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Colour counter</title> <link rel="stylesheet" href="css/style.css"> <script src="js/Main.js"></script> </head> <body> <div id="container"> <h1>Colour counter</h1> <div class="pyramid"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> <div class="five"></div> <div class="six"></div> </div> <h1>Counter Test</h1> <div id="input_div"> <input type="button" value="-" id="green_minus"> <input type="text" size="25" value="0" id="green"> <input type="button" value="+" id="green_plus"> </div> <div id="input_div2"> <input type="button" value="-" id="brown_minus"> <input type="text" size="25" value="0" id="brown"> <input type="button" value="+" id="brown_plus"> </div> <div id="input_div3"> <input type="button" value="-" id="blue_minus"> <input type="text" size="25" value="0" id="blue"> <input type="button" value="+" id="blue_plus"> </div> <div id="input_div4"> <input type="button" value="-" id="yellow_minus"> <input type="text" size="25" value="0" id="yellow"> <input type="button" value="+" id="yellow_plus"> </div> <div id="input_div5"> <input type="button" value="-" id="gold_minus"> <input type="text" size="25" value="0" id="gold"> <input type="button" value="+" id="gold_plus"> </div> <div id="input_div6"> <input type="button" value="-" id="red_minus"> <input type="text" size="25" value="0" id="red"> <input type="button" value="+" id="red_plus"> </div> </div> </body> </html>
任何幫助、協助或建議都會很棒:)
1 個解決方案
解決方案1
1 2022-02-15 12:33:38
我建議將保存輸入的 div 移動到金字塔塊內部。 然后為每個塊添加一個相對值，為每組輸入添加一個絕對值。
然后你可以使用 CSS 到 hover 並顯示輸入，你也可以使用絕對定位將輸入恰好添加到他們的“父母”內
看看下面我的建議是否適合你
（你會注意到一些輸入可能會因為空間小而被切斷，但我會讓你修復這個問題。）
window.onload = function() { let colours = ["green", "brown", "blue", "yellow", "gold", "red"].map(id => { let colour = { elementCount: document.getElementById(id), elementPlus: document.getElementById(`${id}_plus`), elementMinus: document.getElementById(`${id}_minus`), counter: 0, }; colour.elementPlus.addEventListener("click", function() { colour.counter++; colour.elementCount.value = colour.counter; }); colour.elementMinus.addEventListener("click", function() { if (colour.counter > 0) { colour.counter--; colour.elementCount.value = colour.counter; } }); return colour; }); };
.pyramid { clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 100vmin; aspect-ratio: 9 / 15; background-color: white; display: grid; grid-template-columns: 1fr; }.pyramid>* { background: white; }.one { background-color: rgba(234, 27, 7, 0.97); }.two { background-color: rgba(244, 182, 0, 0.98); margin-top: 10px; }.three { background-color: rgba(249, 224, 41, 0.98); margin-top: 10px; }.four { background-color: rgba(4, 157, 252, 0.98); }.five { background-color: rgba(167, 118, 67, 0.99); gap: 0%;important. }:six { background-color, rgba(92, 213, 51. 0;98). },counter input[type=button]: input[type=text] { display; inline-block: width; 20px: background-color; transparent: outline; none: border; none: text-align; center: cursor; pointer: padding; 0px: color; black: height; 33px: font-family; 'Open Sans'. }:pyramid>div { position; relative. }:pyramid>div.hover:input-group { opacity; 1. }.pyramid:input-group { opacity; 0: position; absolute: top; 50%: left; 50%: transform, translate(-50%; -50%): } #container { width; 100px: height; 100px: position; relative: } #infoi { z-index; 10: } button { border-radius; 50%; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Colour counter</title> <link rel="stylesheet" href="css/style.css"> <script src="js/Main.js"></script> </head> <body> <div id="container"> <h1>Colour counter</h1> <div class="pyramid"> <div class="one"> <div id="input_div" class="input-group"> <input type="button" value="-" id="green_minus"> <input type="text" size="25" value="0" id="green"> <input type="button" value="+" id="green_plus"> </div> </div> <div class="two"> <div id="input_div2" class="input-group"> <input type="button" value="-" id="brown_minus"> <input type="text" size="25" value="0" id="brown"> <input type="button" value="+" id="brown_plus"> </div> </div> <div class="three"> <div id="input_div3" class="input-group"> <input type="button" value="-" id="blue_minus"> <input type="text" size="25" value="0" id="blue"> <input type="button" value="+" id="blue_plus"> </div> </div> <div class="four"> <div id="input_div4" class="input-group"> <input type="button" value="-" id="yellow_minus"> <input type="text" size="25" value="0" id="yellow"> <input type="button" value="+" id="yellow_plus"> </div> </div> <div class="five"> <div id="input_div5" class="input-group"> <input type="button" value="-" id="gold_minus"> <input type="text" size="25" value="0" id="gold"> <input type="button" value="+" id="gold_plus"> </div> </div> <div class="six"> <div id="input_div6" class="input-group"> <input type="button" value="-" id="red_minus"> <input type="text" size="25" value="0" id="red"> <input type="button" value="+" id="red_plus"> </div> </div> </div> </div> </body> </html>
如何在img上覆蓋div，並在鼠標懸停時顯示另一個div？
[英]How do you overlay a div over an img, and show another div onmouseover?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.