onmouseover事件边框颜色切换函数丢失边框问题求助

嘿，我一眼就看出问题出在哪啦！你用style.border这个简写属性来设置颜色，但这个属性其实包含了边框宽度、样式、颜色三个部分。当你只传一个颜色值的时候，浏览器会把另外两个属性重置为默认值——而默认的border-style是none，这就导致边框直接消失了，自然onmouseout的时候也恢复不了。

下面给你几个靠谱的解决办法：

方法1：直接修改边框颜色属性（推荐） #

不用碰整个border简写，专门改borderColor属性，这样只会改变颜色，不会影响原本的边框样式和宽度：

function borderChange(id, color) {
  document.getElementById(id).style.borderColor = color;
}

这个方法最省心，前提是你的.menu元素已经通过CSS设置了边框的宽度和样式（比如border: 1px solid black;）。

方法2：使用完整的边框简写值 #

如果你的元素一开始没有预设边框样式，那可以在函数里把边框的完整属性都写清楚，避免浏览器重置样式：

function borderChange(id, color) {
  // 这里假设你需要1px的实线边框，可根据需求调整宽度和样式
  document.getElementById(id).style.border = `1px solid ${color}`;
}

方法3：用CSS伪类实现（更简洁，无需JS） #

其实这种简单的鼠标悬停效果，用CSS的:hover伪类就能搞定，完全不需要写JavaScript，代码更简洁也更好维护：

.menu {
  border: 1px solid black; /* 默认边框样式 */
}
.menu:hover {
  border-color: white; /* 鼠标悬停时的颜色 */
}

对应的HTML就可以简化成：

<div class="menu" id="menu1"> Text </div>

这样不管是鼠标移入还是移出，样式都会自动切换，完全不用操心JS的问题~

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