我需要模仿一个文件浏览器在网络上,我需要的元素内的div改变整个容器的背景颜色时,像这样悬停
的数据
但我似乎只能设法得到这个
的
html看起来像这样
<div className="folder" onClick={() => handleTogglerotation("folder")}>
<!-- some svg goes here -->
<p className="subtitle">folder1</p>
</div>
<div className="folder-content">
<div className="line"></div>
<div className="file-section">
<div className="file-container">
<!-- some svg goes here -->
</svg>
<p>file1.md</p>
</div>
<div className="file-container">
<!-- some svg goes here -->
<p>file2.md</p>
</div>
</div>
</div>
字符串
我知道这和元素本身的大小有关,但是有没有办法达到前面提到的那个呢?
我已经尝试
- 通过z索引将文件容器放置在线上,然后尝试让它占据父文件的整个宽度
- 通过calc()向文件容器添加宽度,但似乎效果不太好
实现这样的目标的最佳途径是什么?
1条答案
按热度按时间ru9i0ody1#
如果不提供CSS,或者不知道div的大小,就很难做出假设,而且很可能无法解决问题。
不过,我会试着对你的情况做些假设:
假设1您的问题与您不知道如何使
file-section
div覆盖line
div的事实有关,在这种情况下,很简单,只需使线1绝对定位:个字符
假设2您的问题与您被限制在一个已经很小的div中的事实有关,在这种情况下,如果您知道您所限制的div与屏幕左侧之间的距离,您可以将
file-containers
的边距设置为该精确值,但为负数,并且其宽度为width: calc(100% + value)
。如果是这种情况,请告诉我,你想要一个更好的解释,或者如果这是一个完全不同的情况。P.S.在未来,请添加所有相关的代码,包括相关的CSS,最好像我刚才做的代码片段