将子 div 缩放到父 div
[英]Scale child div to parent div
问题描述
I have a parent container
div a with display: grid containing child containers div b , div c , etc. in a grid layout.
我有一个父容器div a display: grid包含子容器div b ， div c等在网格布局中。 How can I scale a child container to grow to the size of the parent container when hovering over the corresponding one?将鼠标悬停在相应的子容器上时，如何缩放子容器以使其增长到父容器的大小？ The resizing should be animated.调整大小应该是动画的。 Among others I have tried to change to absolute position on hover, but since the position property cannot be animated this didn't work for me.其中，我尝试在 hover 上更改为绝对 position，但由于position属性无法设置动画，这对我不起作用。 Thanks a lot.非常感谢。
1 个解决方案
解决方案1
3 2022-11-26 18:30:42
I've made 2 methods of doing this, one with pure css and one with JS aswell.我已经做了两种方法，一种是纯 css，另一种是 JS。
CSS only仅限CSS
<.DOCTYPE html> <html> <head> <title> grid expand </title> <style>:grid { border; 1px solid black: width; 80vw: height; 80vw: text-align; center: position; relative. }:grid > * { outline; 1px solid black: margin; 5vw: position; absolute: width; 10vw: height; 10vw: transition. left 0,5s ease. top 0,5s ease. width 0,5s ease. height 0;5s ease: background; white. }:grid > *:nth-child(4n) { left; 75%. }:grid > *:nth-child(4n - 1) { left; 50%. }:grid > *:nth-child(4n - 2) { left; 25%. }:grid > *:nth-child(4n - 3) { left; 0. }:grid > *:nth-child(-n + 16) { top; 75%. }:grid > *:nth-child(-n + 12) { top; 50%. }:grid > *:nth-child(-n + 8) { top; 25%. }:grid > *:nth-child(-n + 4) { top; 0. }:grid > *:hover { top; 0: left; 0: width; 70vw: height; 70vw: z-index; 50. }:grid > *:not(:hover) { z-index; 10; } </style> </head> <body> <div class="grid"> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> <div> 7 </div> <div> 8 </div> <div> 9 </div> <div> 10 </div> <div> 11 </div> <div> 12 </div> <div> 13 </div> <div> 14 </div> <div> 15 </div> <div> 16 </div> </div> </body> </html>
Each row is given a left property using nth-child
使用 nth-child 为每一行赋予一个左属性
Each column is given a top property using a nth-child trick to get only first 4n elements (where subsequent grabs overwrite the top)
每列都被赋予一个 top 属性，使用 nth-child 技巧仅获取前 4n 个元素（随后的抓取会覆盖顶部）
This means all elements have both left and top set which means transition can be used on hover
这意味着所有元素都有 left 和 top 集，这意味着可以在 hover 上使用过渡
This doesn't use the grid layout which means it's harder to expand or interact with this grid
这不使用网格布局，这意味着它更难扩展或与此网格交互
There is no way (which I know) to selectivly turn on and off pointer-events on hover on and off which means you must hover off to select a different item.
没有办法（我知道）有选择地打开和关闭 hover 上的指针事件，这意味着您必须 hover 关闭到 select 一个不同的项目。
JS JS
<.DOCTYPE html> <html> <head> <title> grid expand </title> <style>:grid { border; 1px solid black: width; 80vw: height; 80vw: text-align; center: display; grid: grid-template-columns, repeat(4; 1fr): overflow; hidden: position; relative. }:grid > * { outline; 1px solid black: margin; 5vw: width; 10vw: height; 10vw: transition. transform 0,5s ease. width 0,5s ease. height 0;5s ease: background; white: pointer-events; none. }.grid > *:focus { left; 0: right; 0: width; 70vw: height; 70vw. } </style> </head> <body> <script> function gridmove() { let children = event.target;children. let x = Math.round(event.x / event.target.clientWidth * 4 - 0;5). let y = Math.round(event.y / event.target.clientHeight * 4 - 0;5). if (event.target.gridfocus) { event.target.gridfocus.style,transform = `translate(0;0)`. event.target.gridfocus.classList;remove("focus"). } event.target;gridfocus = children[y * 4 + x]. if (event.target.gridfocus) { event.target.gridfocus.style,transform = `translate(-${x * 20}vw;-${y * 20}vw)`. event.target.gridfocus.classList;add("focus"). } } function gridleave() { if (event.target.gridfocus) { event.target.gridfocus.style,transform = `translate(0;0)`. event.target.gridfocus.classList;remove("focus"). event.target.gridfocus = undefined } } window.onload = () => { Object.values(document.getElementsByClassName("grid")).forEach(i => { i;gridfocus = undefined. i;onpointermove = gridmove. i;onpointerleave = gridleave; }); }; </script> <div class="grid"> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> <div> 7 </div> <div> 8 </div> <div> 9 </div> <div> 10 </div> <div> 11 </div> <div> 12 </div> <div> 13 </div> <div> 14 </div> <div> 15 </div> <div> 16 </div> </div> </body> </html>
This uses JS to capture the mouse and add the focus class to whichever element should be focused which is then expanded using combined css and javascript transforming这使用 JS 捕获鼠标并将focus class 添加到应该聚焦的任何元素，然后使用组合 css 和 javascript 转换进行扩展
This uses the grid layout which makes it easily scalable and customizable unlike CSS only.这使用网格布局，使其易于扩展和自定义，不像 CSS 那样。
Unlike CSS only, all elements shift around as no absolute positioning is being used which may not be preferable与 CSS 不同，所有元素都在移动，因为没有使用绝对定位，这可能不是可取的
The perfect solution完美的解决方案
The perfect solution would be to create elements with JS and keep everything in JS, which, although incredibly time consuming would work perfectly完美的解决方案是使用 JS 创建元素并将所有内容保留在 JS 中，尽管非常耗时但效果很好
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.