Javascript onmouseover边框变色函数删除边框
Javascript onmouseover border color changing function deleting the border
我已经创建了一个函数来在鼠标悬停时更改边框的颜色,但由于某种原因它会删除边框而不更改颜色,所以我无法在鼠标悬停时将颜色改回原样。
这是:
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>
当你使用 border
shorthand 属性 时,如果你不指定宽度和样式,那么它们默认为 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>
边框已删除,因为您编写的代码覆盖了 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>
我已经创建了一个函数来在鼠标悬停时更改边框的颜色,但由于某种原因它会删除边框而不更改颜色,所以我无法在鼠标悬停时将颜色改回原样。 这是:
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>
当你使用 border
shorthand 属性 时,如果你不指定宽度和样式,那么它们默认为 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>
边框已删除,因为您编写的代码覆盖了 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>