如何在Adobe XD中调整组件特定状态尺寸并限定交互触发范围

对应两个需求的解决方案如下： #

1. 实现组件尺寸自适应包裹内容、支持状态动态调整

• 给组件外层容器设置display: inline-flex或者display: inline-block，取消固定宽高配置，容器尺寸会自动适配内部内容的大小
• 要根据状态切换尺寸时，给组件绑定状态对应的类名，单独配置不同状态下的内边距/尺寸规则即可，CSS示例：

/* 基础状态下仅包裹信息图标 */
.info-component {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}
/* 展开状态（比如点击后显示提示文案）自动适配内容宽度 */
.info-component.expand {
  padding: 4px 10px;
  gap: 6px;
}

2. 仅悬停信息图标时触发悬停状态

将原来绑定在外层容器的:hover逻辑修改为仅针对信息图标触发即可：

• 如果你使用的浏览器支持CSS :has() 选择器（目前主流浏览器最新版本均已支持），可以直接用下面的写法：

/* 仅当内部信息图标被悬停时，才给外层容器加悬停样式 */
.info-component:has(.info-icon:hover) {
  /* 你原来的悬停样式规则，比如背景色、边框等 */
  background-color: #bbf7d0;
}

• 如果需要兼容低版本浏览器，可以通过JS监听信息图标的mouseenter和mouseleave事件，动态给外层容器添加/移除悬停状态类实现效果。

内容的提问来源于stack exchange，提问作者SeanyMc