Question

HTML CODE：

<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 CODE：

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属性突然发生在按钮本身之外，即使你将鼠标悬停在你之后出现的标签上的文本上单击按钮。这是为什么？

Answer 1

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

Answer 2

我相信你在这里使用label元素可能是原因。我只使用/看过 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>

（虽然我相信只需从标签中删除输入元素并将它们放到输入中就行了）

这个按钮发生了什么？

2 个答案: