Javascript onmouseover边框颜色改变功能删除边框

Question

我已经创建了一个在鼠标悬停时更改边框颜色的函数，但由于某种原因，它删除了边框而不更改颜色，所以我无法在鼠标悬停时将颜色更改回来。 这是:

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

<div class="menu" id="menu1" onmouseover="borderChange(this.id, 'White');" onmouseout="borderChange(this.id, 'Black');"> Text </div> 

Answer 1

当您使用 border 简写属性时，如果您未指定宽度和样式，则它们默认为 0 和 none ...此时颜色是什么并不重要。

改为设置border-color 属性。

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

div { border: solid red 1px; }
body { background: blue; }

<div class="menu" id="menu1" onmouseover="borderChange(this.id, 'White');" onmouseout="borderChange(this.id, 'Black');"> Text </div>

<小时/>

一边...

传递元素的 id，然后立即通过其 ID 获取元素是没有意义的。只需传递元素本身即可。

function borderChange(element, color) {
  element.style.borderColor = color;
}

div { border: solid red 1px; }
body { background: blue; }

<div class="menu" id="menu1" onmouseover="borderChange(this, 'White');" onmouseout="borderChange(this, 'Black');"> Text </div>

同样，使用 JavaScript 来实现此目的也过于复杂。您可以只使用 CSS。

div { border: solid red 1px; }
div:hover { border-color: white; }
body { background: blue; }

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