ВСЕ ЖИВОЙ КОД: http://jsfiddle.net/9GWtT/
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 неожиданно появляется далеко за пределами самой кнопки, даже когда вы наводите курсор на текст вярлык, который появляется после нажатия кнопки.Почему это?