如何将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.