Javascript 嵌套在<；中的工具提示；标签>；，防止'；鼠标向下'；触发输入：激活

我有一个特定的情况，我们在

中嵌套工具提示（用于实现自定义单选按钮设计）

event.preventDefault（）在工具提示上的“单击”功能正常，但在触发隐藏的

字段的“mousedown”状态时失败。从而改变了假单选按钮的样式

我举了一个小例子来说明发生了什么

const$tooltipElement=$（'.tooltip'）；
$ToolTipeElement.on（'单击'，（事件）=>{
event.preventDefault（）；
})

标签{
位置：相对位置；
显示：内联块；
右边距：10px；
}
输入{
不透明度：0；
左：0；
位置：绝对位置；
溢出：隐藏；
指针事件：无；
}
.盒子{
宽度：15px；
高度：15px；
边界半径：50%；
边框：1px纯色灰色；
显示：内联块；
光标：指针；
}
输入：选中+复选框{
背景：蓝色；
}
输入：活动+.box{
背景：红色；
}
.文本{
光标：指针；
}
.工具提示{
显示：内联块；
宽度：8px；
高度：8px；
边框：2倍纯红；
}
。工具提示：激活{
背景：灰色；
}
.工具提示：活动：：之前{
内容：attr（数据内容）；
位置：绝对位置；
宽度：100px；
高度：80px；
背景色：#fff；
文本对齐：居中；
最高：100%；
左：50%；
转化：translateX（-50%）；
}

选择1
选择2

这是怎么回事：不要将工具提示放在标签中，而是将其放在一个范围中，该范围将包装标签和工具提示（将标签样式移动到此范围）：

const$tooltipElement=$（'.tooltip'）；
$ToolTipeElement.on（'单击'，（事件）=>{
event.preventDefault（）；
})

.wrapper{
位置：相对位置；
显示：内联块；
右边距：10px；
}
输入{
不透明度：0；
左：0；
位置：绝对位置；
溢出：隐藏；
指针事件：无；
}
.盒子{
宽度：15px；
高度：15px；
边界半径：50%；
边框：1px纯色灰色；
显示：内联块；
光标：指针；
}
输入：选中+复选框{
背景：蓝色；
}
输入：活动+.box{
背景：红色；
}
.文本{
光标：指针；
}
.工具提示{
显示：内联块；
宽度：8px；
高度：8px；
边框：2倍纯红；
}
。工具提示：激活{
背景：灰色；
}
.工具提示：活动：：之前{
内容：attr（数据内容）；
位置：绝对位置；
宽度：100px；
高度：80px；
背景色：#fff；
文本对齐：居中；
最高：100%；
左：50%；
转化：translateX（-50%）；
}

选择1
选择2

为什么不删除活动css？很遗憾，我们需要它，设计需要它。最初，不需要在标签中嵌套工具提示，而且效果很好。您是否考虑过用JS实现所有样式？我不认为你想要的只是：活动和东西。为什么不把工具提示移到标签外面呢？如果我点击一个信息框，我不希望它在我们实现原子设计方法的同时也选中这个选项。其中工具提示和单选按钮是两个独立的组件。这使得我们不能从工具提示访问单选按钮，反之亦然。。。这让事情变得更难：）。另外，JS的样式化是最后一个解决方案，我想避免它。谢谢你，Pete，我将在out环境中测试它，如果它合适，我将接受答案：）