Question

我已经创建了一个功能来更改边框的颜色onmouseover但由于某种原因它删除边框而不更改颜色，所以我不能改变颜色onmouseout。这是：

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 ...此时它没有＆＃39无论颜色是什么。

改为设置border-color属性。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

...除了

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

同样，为此使用JavaScript过于复杂。你可以使用CSS。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

删除边框是因为编写的代码会覆盖border样式。

您应该只更改border-color，而不是border样式。

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

#menu1 {
  border: 1px solid black;
}

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