Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat's happening with this button?
    primarykey
    data
    text
    <p>ENTIRE LIVE CODE: <a href="http://jsfiddle.net/9GWtT/" rel="nofollow">http://jsfiddle.net/9GWtT/</a></p> <p>HTML CODE:</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;form&gt; &lt;fieldset&gt;&lt;p&gt; &lt;label&gt;Username: &lt;input type="text" name="user" id="user" /&gt;&lt;/label&gt;&lt;/p&gt;&lt;br /&gt;&lt;p&gt; &lt;label&gt;Password: &lt;input type="password" name="passw" id ="passw" /&gt;&lt;/label&gt;&lt;/p&gt; &lt;label&gt;&lt;input type="submit" value="Log in" name="submitBUT" class="regbut" id="submitBUT" /&gt;&lt;div id="helllo"&gt;&lt;/div&gt;&lt;/label&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/body&gt; </code></pre> <p></p> <p>CSS CODE:</p> <pre><code>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; } </code></pre> <p>JAVASCRIPT CODE:</p> <pre><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 &lt; users.length; i++) { if (users[i] == u) { output.push(i); } } for (var o = 0; o &lt; 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; }; </code></pre> <p>Okay, so the button works nicely at first, but then after you click it once, the :hover property suddenly happens far outside of the button itself, even when you're hovering over the text in the label that appears after you click the button. Why is this??</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload