这个按钮是怎么回事？答案

【问题标题】：What's happening with this button?这个按钮是怎么回事？
【发布时间】：2010-12-31 15:21:07
【问题描述】：

HTML 代码：

<html>
<body>
    <form>
        <fieldset><p>
            <label>Username: <input type="text" name="user" id="user" /></label></p><br /><p>
            <label>Password: <input type="password" name="passw" id ="passw" /></label></p>
            <label><input type="submit" value="Log in" name="submitBUT" class="regbut" id="submitBUT" /><div id="helllo"></div></label>
        </fieldset>
    </form>
</body>

CSS 代码：

input.regbut {
    width: 65px;
    height: 25px;
    background-color: #3C0;
    color: white;
    font-weight: bold;
    border-radius: 7px;
  //-moz-border-radius: 7px;
    border-top: 1px solid #CCC;
    border-left: 1px solid #CCC;
    border-right: 1px solid #777;
    border-bottom: 1px solid #777;
}
input.regbut:hover {
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}
input.regbut:active {
    background-color: #390;
}

JAVASCRIPT 代码：

var subBut = document.getElementById('submitBUT');
var users = ['hithere', 'Peter112', 'Geksj', 'lOsja', 'fInduS', '323DssaAA', 'f1fsus'];
var passes = ['mllesl', 'Petboy', 'Heneeesh', 'Olga', '234dasdf77/', 'minls', 'ew832ja'];
var output = [];

function submi(u, p) {
    for (var i = 0; i < users.length; i++) {
        if (users[i] == u) {
            output.push(i);
        }
    }
    for (var o = 0; o < output.length; o++) {
        if (passes[output[o]] == p) {
            return p + ' was a correct password.';
        }
    }
    return 'Error, please try again';
}
subBut.onclick = function() {
    document.getElementById('helllo').innerHTML =
    submi(document.getElementById('user').value, document.getElementById('passw').value);
    return false;
};

好的，所以按钮一开始可以很好地工作，但是在您单击一次之后， :hover 属性突然发生在按钮本身之外很远的地方，即使您将鼠标悬停在出现在您之后的标签中的文本上单击按钮。这是为什么呢？？

【问题讨论】：

你的浏览器是什么？在 FF 中看不到异常。
请在问题中包含相关代码，正如我上次提到的：stackoverflow.com/questions/4570049/…
真的吗？你试过按照我说的做吗？先点一次，再试试。
@T.J. - 也许 OP 对实际相关的代码感到困惑。在这种情况下，他提供的标记就足够了。
哦，你是这个意思。这是因为您将消息放在与输入相同的标签内。（OP 注意到单击后将鼠标悬停在添加的消息上将从同一中的输入继承 CSS

标签： javascript html css button

【解决方案1】：

将结果的<div id="helllo"></div> 移到按钮标签之外： http://jsfiddle.net/pgS5j/

【讨论】：

【解决方案2】：

我相信您使用的标签元素可能是这里的原因。我只使用/看到了标签元素 next 用于输入

尝试像这样组织你的 html...

（我更喜欢 DL 中的表单，但这完全取决于你。）

<dl>
<dt>Username:</dt>
<dd><input type="text" id="userName" /><label for="#userName" /></dd>
<dt>Password:</dt>
<dd><input type="password" id="pass" /><label for="#pass" /></dd>
<dt></dt>
<dd><input type="submit" name="formSubmit" id="formSubmit" /><div id="hello"></div></dd>
</dl>

（虽然我相信简单地从标签中删除输入元素并将它们放在输入的 NEXT 中就可以了）

【讨论】：

就放置而言，OP 对标签的使用是正确的。将表单控件包装在标签中使该标签与控件隐式关联，并使for 属性变得不必要。 W3C：w3.org/TR/html401/interact/forms.html#h-17.9.1
再次查看您推荐的更改：您的示例实际上采用标签（“用户名：”，“密码：”）并将其移出标签元素并改为定义术语元素，使标签元素为空且无用。无论是否使用定义列表标记，您都完全否定了使用标签元素的价值。
@steve - 有趣的是，我从未见过这种形式的标记（因此我believe）。我只是在演示如何组织标记 - 而不是如何通过标签显示实际消息......可以通过 JS 修改。
另外，OP 甚至没有为该消息使用标签（经过编辑以反映这一点）。正如codethis 指出的那样，从标签中删除#message div 就可以了。
我的 cmets 似乎被误解了，我认为这是我自己的错。暂时忽略 OP 并显示消息。问题是Username: 是<label> 的内容——它是“用户名”输入的标签。因此，您的代码将编写如下：<dt><label for="userName">Username:</label></dt>。我希望这更清楚一点。我不是想在这里攻击你，只是想有建设性。