如何在鼠标悬停某元素时移除另一CSS元素的属性

方案一：纯CSS实现（元素需有兄弟/包含关系） #

CSS没法直接"移除"属性，但可以通过重置属性到初始状态达到等效效果。如果element2是element1的同级元素且位于element1之后，可使用兄弟选择器：

<button id="element1" type="button">Element1</button>
<button id="element2" type="button">Element2</button>
<style>
/* 给element2设置目标属性 */
#element2 {
  background-color: #ff0000; /* 示例属性，替换为你需要修改的属性即可 */
}

/* 悬停element1时重置element2的属性 */
#element1:hover ~ #element2 {
  /* unset会让属性恢复默认行为，也可按需用initial/inherit */
  background-color: unset;
}
</style>

• 若element2是element1的紧相邻兄弟，可把~换成+选择器；
• unset：可继承属性会继承父元素值，非继承属性用初始值；initial强制用属性默认初始值；inherit强制继承父元素值，按需选就行。

方案二：JavaScript实现（通用场景，无元素结构限制） #

如果元素没有特定结构关系，或者需要更灵活的控制，用JS直接操作DOM样式：

<button id="element1" type="button">Element1</button>
<button id="element2" type="button">Element2</button>
<style>
#element2 {
  background-color: #ff0000;
}
</style>
<script>
const ele1 = document.getElementById('element1');
const ele2 = document.getElementById('element2');

// 鼠标悬停时移除指定属性
ele1.addEventListener('mouseover', () => {
  ele2.style.removeProperty('background-color');
});

// 可选：鼠标离开时恢复原属性
ele1.addEventListener('mouseout', () => {
  ele2.style.backgroundColor = '#ff0000';
});
</script>

• removeProperty()会直接删除元素的行内样式属性，若原属性定义在样式表中，元素会恢复样式表的设置；
• 要是需要完全重置属性，也可以用ele2.style.setProperty('background-color', 'unset')替代removeProperty。

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