反应:悬停时叠加，元素没有外部容器

Question

我正在开发一个可以拖放HTML元素的无代码平台。

需要2件事：

• 用户可以选择每个元素
• 用户可以通过右侧面板设置每个元素的样式(宽度、长度、字体大小等(

为了1(我使用了这个解决方案：

Selector.js

export default Selector = ({children}) => {
const [isHovered, setIsHovered] = useState(false);
const mouseOverHandler = (ev) => {
ev.stopPropagation();
setIsHovered(true);
}
const mouseOutHandler = (ev) => {
ev.stopPropagation();
setIsHovered(false);
}
return (
<div className="container" onMouseOver={mouseOverHandler} onMouseOut={mouseOutHandler}>
{children}
{ isHovered && <div className="overlay"></div> }
</div>
);
}

Selector.css

.container {
position: relative;               // For .overlay to be absolute
max-width: fit-content;           // To fit children/content size
}
.overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(122, 122, 122, 0.2);
}

App.js

export default App = () => [
return (
<div className="workspace">
<Selector><Input style={{width: "100%"}} /></Selector>
<Selector><Block style={{width: "100px"}} /></Selector>
<Selector><Block style={{width: "100%"}} /></Selector>
</div>
);
}

问题例如，当我尝试在Block组件上设置width:100%时。我希望Block在.workspace中拉伸全宽，但由于Block在Selector中，它将以.container为父元素，因此它将只填充该元素，而不是.workspace。这样一来，我就无法满足要求。

您可以在Fiddle上查看：https://jsfiddle.net/49cmok2a/2/.如果你在Block上设置宽度为100px，它将是具有100px宽度的Block，但如果你设置100%宽度，它将缩小到1px。

你知道如何创建Selector吗，这样它就不会在元素上创建父div。谢谢

Answer 1

您的问题是试图覆盖子项中的相对样式。只需两个操作即可轻松控制Selector的样式宽度：

首先，你必须更改你的最大宽度：对象适合，这个属性主要用于img或视频标签。像我做一样更改它的属性

.container{
position: relative;
max-width: 100%;
cursor: pointer;
}

下次您可以轻松更改Selector的宽度。

我希望我答对了你的问题，祝你今天愉快！

Answer 2

如果你只想要正方形，你可以用100vw代替100%:

const App = () => {
return (
<div className="workspace">
<Selector><Input style={{width: "100%"}} /></Selector>
<Selector><Block style={{width: "100vw"}} /></Selector>
</div>
);
}

或者使.workspace为其父级的100%，使选择器为其父级(.workspace(的100%，并使Block或Input为您希望的大小：

<div className="workspace" style={{width: "100%"}} >
<Selector style={{width: "100%"}} ><Input /></Selector>
<Selector style={{width: "100%"}} ><Block/></Selector>
</div>

但是您需要css文件的最大宽度为100%o。

max-width: 100%;