Question

我有以下HTML + JavaScript代码，用于根据所选的颜色选项从JS更改HTML页面的背景颜色。但无论我选择何种标签，我的背景仅在鼠标悬停时变为红色，在鼠标输出时变为白色。其余的颜色变化没有发生。我哪里错了？

<html>
    <head>
        <title>
        Color Highlighter
    </title>

<script type="text/javascript">
    function changeColor(target)
    {
         document.body.style.background = target;
    }

    function restoreColor()
    {
         document.body.style.background ="white";
    }
</script>

</head>

<body>
    <label onmouseover="changeColor('red');" onmouseout="restoreColor();">Red<br>
    <label onmouseover="changeColor('blue');" onmouseout="restoreColor();">Blue<br>
    <label onmouseover="changeColor('yellow');" onmouseout="restoreColor();">Yellow<br>
    <label onmouseover="changeColor('green');" onmouseout="restoreColor();">Green<br>
</body>

Answer 1

你的代码几乎没问题。

您忘记完成 </label>标记dude。

<label onmouseover="changeColor('red');" onmouseout="restoreColor();">Red</label><br>
<label onmouseover="changeColor('blue');" onmouseout="restoreColor();">Blue</label><br>
<label onmouseover="changeColor('yellow');" onmouseout="restoreColor();">Yellow</label><br>
<label onmouseover="changeColor('green');" onmouseout="restoreColor();">Green</label><br>

Answer 2

您需要关闭每个＆lt; label＆gt;标记为＆lt; / label＆gt;：

<label onmouseover="changeColor('red');" onmouseout="restoreColor();">Red</label><br>
<label onmouseover="changeColor('blue');" onmouseout="restoreColor();">Blue</label><br>
<label onmouseover="changeColor('yellow');" onmouseout="restoreColor();">Yellow</label><br>
<label onmouseover="changeColor('green');" onmouseout="restoreColor();">Green</label><br>

Answer 3

问题是您的HTML无效。您尚未关闭标签，因此第一个标签包含所有后续标签，因此会吞下鼠标悬停和鼠标移动事件，从而阻止它们点击其他标签。

以下是问题的演示，以及如何解决问题：

HTML

<!-- fixed markup -->
<label class="valid" onmouseover="changeColor('red');" onmouseout="restoreColor();">Red</label>
<label class="valid" onmouseover="changeColor('blue');" onmouseout="restoreColor();">Blue</label>
<label class="valid" onmouseover="changeColor('yellow');" onmouseout="restoreColor();">Yellow</label>
<label class="valid" onmouseover="changeColor('green');" onmouseout="restoreColor();">Green</label>
<br/>
<br/>

<!-- original invalid markup -->
<label class="invalid" onmouseover="changeColor('red');" onmouseout="restoreColor();">Red<br>
<label class="invalid" onmouseover="changeColor('blue');" onmouseout="restoreColor();">Blue<br>
<label class="invalid" onmouseover="changeColor('yellow');" onmouseout="restoreColor();">Yellow<br>
<label class="invalid" onmouseover="changeColor('green');" onmouseout="restoreColor();">Green<br>

CSS

.valid {
    border:1px solid blue;
}

.invalid {
    border:1px solid red;
}

的JavaScript

window.changeColor = function(target)
{
    document.body.style.background = target;
}

window.restoreColor = function()
{
    document.body.style.background ="white";
}

http://jsfiddle.net/5ufgg0uw/2/

demo

使用CSS，我将带有红色的无效标签和带蓝色的有效标签接壤，这样就可以看出行为上的差异。它清楚地显示了第一个无效标签如何吞噬所有后续标签。

Answer 4

为什么不将changeColor('white')用于onmouseout？

Answer 5

我认为你的标记存在问题。为什么没有标签标签关闭？ JavaScript事件向上传播通过目标元素的祖先节点的行为将导致您描述的行为。

通过Javascript更改HTML页面的颜色

5 个答案:

HTML

CSS

的JavaScript