Question

我正在处理这段代码而且我突然无法输入输入框。我不知道是什么造成的，但我已经尝试了一切。我发布了下面的所有代码，因为坦率地说，我知道它可能是任何东西。（当我尝试在css中编辑带有“createone”类的span标签时，它也是无关的说明，它不会配合：hover。它可以让我更改它的样式属性而不用：hover但是有了它，它不会工作。）

<!DOCTYPE html>
<html>
<head>
    <title>Log in box</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Ramabhadra' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Khand:700' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
</head>
<body>
<div class="successLog">
<div class="header">
    <ul class="cats">
        <li class="listItems" id="home">Home</li>
        <li class="listItems" id="dashboard">Dashboard</li>
        <li class="listItems" id="contactUs">Contact Us</li>
    </ul>
  </div>
  <div class='dropdownHome'>
    <ul class="catLists">
        <li class="catListItem">Event Calender</li><br>
        <li class="catListItem">Bookings</li><br>
        <li class="catListItem">Picture Gallery</li><br>
        <li class="catListItem">Login</li><br>
        <li class="catListItem">Sign Up</li>
    </ul>
  </div>
  <div class="dropdownDashboard">
    <ul class="catLists">
        <li class="catListItem">Saved Info</li><br>
        <li class="catListItem">Friends</li><br>
        <li class="catListItem">Document</li><br>
        <li class="catListItem">Profile</li><br>
        <li class="catListItem">Account</li>
    </ul>
  </div>
  <div class="dropdownContactUs">
    <ul class="catLists">
        <li class="catListItem">Email</li><br>
        <li class="catListItem">Forum</li><br>
        <li class="catListItem">Phone-numbers</li><br>
        <li class="catListItem">Facebook</li><br>
        <li class="catListItem">Twitter</li>
    </ul>
  </div><Br><Br><Br>
    <h1 class="welcomeBack">Hello! Welcome back to Code Acedamy</h1>
    <!--<button class="logOut">Log Out</button>-->
</div>
<div class="backarea">
    <div class="loginArea">
        <input type="text" placeholder="Username" class="userInput" name="userInput"><h2 class="username">Username:</h2></input>
        <input type="password" class="passInput" placeholder="Password" name="passInput"<h2 class="password">Password:</h2></input>
        <button class="login">Log In</button>
        <p class="createacc">Don't have an account? <span class="createone">Creat one.</span></p>
        <p class="error">Sorry but that username or password is incorrect.</p>
    </div>
    <div class="newAccArea">
        <h1 class="newAccText">Create New Account</h1>
        <h2 class="newUsername" id="position">Username:</h2>
        <input class="newUser" type="text" name="newUser" placeholder="Username" id="position"></input>
        <h2 class="newPassword" id="position">Password:</h2>
        <input class="newPass" type="password" name="newPass" placeholder="Password" id="position"></input>
        <h2 class="newPassword" id="position">Password:</h2>
        <h2 class="confNewPassword" id="position">Confirm Password:</h2>
        <input class="confNewPass" type="password" name="confNewPass" placeholder="Confirm Password" id="position"></input>
        <button class="createAccButt">Create Account</button>
    </div>
</div>
</body>
</html>

CSS：

body {
    background-color:#F0F0F0;
}
.successLog {
    background-color:#8A8A8A;
    height:450px;
    width:700px;
    z-index:1;
    opacity:0;
}
.loginArea {
    opacity:1;
}
/*CREATE NEW ACCOUNT AREA*/
.newAccArea {
    position:relative;
    bottom:500px;
    opacity:0;
}
.newUsername {
    position:relative;
    top:80px;
    text-align:center;
    color:black;
    font-family: 'Oswald', sans-serif;
}
.newUser {
    position:relative;
    top:60px;
    left:45px;
    padding:5px;
    font-family: 'Lato', sans-serif;
}
.newPassword {
    position:relative;
    top:42px;
    text-align:center;
    color:black;
    font-family: 'Oswald', sans-serif;
}
.newPass {
    position:relative;
    top:23px;
    left:45px;
    padding:5px;
    font-family: 'Lato', sans-serif;
}
.confNewPassword {
    position:relative;
    bottom:50px;
    text-align:center;
    color:black;
    font-family: 'Oswald', sans-serif;
}
.confNewPass {
    position:relative;
    bottom:70px;
    left:45px;
    padding:5px;
    font-family: 'Lato', sans-serif;
}
.createAccButt {
    color:white;
    background-color:#E60716;
    padding:5px;
    font-family: 'Oswald', sans-serif;
    border:none;
    margin:10px;
    position:relative;
    bottom:77;
    left:78;
    height:40;
    width:80;
    font-size:20px;
    border-radius:4px;
}
.createAccButt:hover {
    background-color:#A81919;
}
.newAccText {
    position:relative;
    top:100px;
    font-family: 'Oswald', sans-serif;
    font-size:30px;
    text-align:center;
    color:red;
}
/*LOG IN AREA*/
.backarea {
    background-color:#6DE3E3;
    width:255px;
    height:300px;
    border:1px solid black;
    border-radius:9px;
    position:relative;
    top:67px;
    left:230px;
    position:fixed;
}
.userInput {
    padding:5px;
    margin:7px;
    font-family: 'Lato', sans-serif;
    position:relative;
    top:50px;
    left:35px;
    border:1px solid white;
}
.userInput:hover {
    border:2px solid #60BF68;
}
.username {
    color:#E60716;
    font-family: 'Oswald', sans-serif;
    position:relative;
    bottom:50px;
    left:75px;
}
.passInput {
    padding:5px;
    margin:7px;
    font-family: 'Lato', sans-serif;
    position:relative;
    top:20px;
    left:35px;
    border:1px solid white;
}
.passInput:hover {
    border:2px solid #60BF68;
}
.password {
    color:#E60716;
    font-family: 'Oswald', sans-serif;
    position:relative;
    bottom:80px;
    left:75px;
}
.login {
    color:white;
    background-color:#E60716;
    padding:5px;
    font-family: 'Oswald', sans-serif;
    border:none;
    margin:10px;
    position:relative;
    bottom:60;
    left:71;
    height:40;
    width:80;
    font-size:20px;
    border-radius:4px;
}
.login:hover {
    background-color:#B81414;
    border:1px solid black;
}
.createacc {
    position:relative;
    bottom:73px;
    font-family: 'Roboto Condensed', sans-serif;
    padding:8
}
.createone {
    text-decoration:none;
    color:#4548E6;
}
.createone:hover {
    color:purple;
}
.error {
    color:red;
    font-family: 'Merriweather', serif;
    font-size:10;
    position:relative;
    bottom:93px;
    text-align:center;
    opacity:0
}
/*DROP DOWN MENU
/*DEFUALT CLASSES*/
.clicked {
    color:#fff;
}
.invis {
    opacity:0;
}
/*HTML CLASSES*/
.header {
    background-color:black;
    height:50px;
    border-radius:10px;
    z-index:10;
}
li {
    color:white;
    display:inline;
    width:100%
}
.cats {
    padding:6px;
    width:100%;
    font-size:27px;
    font-family: 'Khand', sans-serif;
}
.cats .listItems:hover {
    width:100px;
    font-size:27px;
    font-family: 'Khand', sans-serif;
    color:#96F29C;
    display:inline;
    position:relative;
    padding-left:70px;
}
.cats .listItems:active {
    width:100px;
    font-size:27px;
    font-family: 'Khand', sans-serif;
    color:#318A29;
    display:inline;
    position:relative;
    padding-left:70px;
}
.listItems {
    padding:70px;
}
.dropdownHome {
    height:200px;
    width:180px;
    background-color:#9E9E9E;
    position:absolute;
    left:14px;
    bottom:210px;
    border:2px solid black;
    z-index:1;
    border-radius:13px;
    opacity:0;
}
.dropdownDashboard {
    height:200px;
    width:180px;
    background-color:#9E9E9E;
    position:absolute;
    left:255px;
    bottom:210px;
    border:2px solid black;
    z-index:1;
    border-radius:13px;
    opacity:0;
}
.dropdownContactUs {
    height:200px;
    width:180px;
    background-color:#9E9E9E;
    position:absolute;
    left:507px;
    bottom:210px;
    border:2px solid black;
    z-index:1;
    border-radius:13px;
    opacity:0;
}
.catLists {
    font-size:18px;
    text-align:center;
    position:relative;
    right:20;
    font-family: 'Ramabhadra', sans-serif;
}
.catListItem {
    color:black;
}
.welcomeBack {
    font-family: 'Oswald', sans-serif;
    color:blue;
    text-align:center;
}
.logOut {
    position:relative;
    top:130px;
    left:312px;
    padding:5px;
    border:none;
    background-color:red;
    color:white;
    width:100px;
    height:40px;
    font-size:20px;
    font-family: 'Oswald', sans-serif;
}
.logOut:hover {
    background-color:#B51919;
    border-top:1px solid #F7A3A3;
    border-left:1px solid #F7A3A3;
}

使用Javascript：

//Username and passwords
var UserandPass = array[(
userResult === "CodeAcademy" 
&& 
passResult === "fun-coding" 
||
userResult === "User_Example" 
&& 
passResult === "Pass_Example" 
||
userResult === "JoshH" 
&& 
passResult === "Wisconsin" 
|| 
userResult === "Wisconsin21" 
&& 
passResult === "go_packers")];

$(document).ready(function() {
    $('.login').click(function(){
        var userResult = $('input[name=userInput]').val();
        var passResult = $('input[name=passInput]').val();
        if(userResult === "CodeAcademy" && passResult === "fun-coding" || userResult === "User_Example" && passResult === "Pass_Example") {
           $('.backarea').fadeOut('fast');
           $('.successLog').fadeTo('fast',1);
        }
        else {
        $('.passInput').css('border-color','red');
        $('.userInput').css('border-color','red');
        $('.error').fadeTo('fast',1);
        $('.error').effect( "bounce",{ times: 3 },"slow" );
        };
    });
});
$(document.ready(function(){
    $('.createone').click(function(){
        $('.backarea').fadeOut('fast');
        $('.newAccArea').fadeTo('fast',1);
    });
});
$(document).ready(function(){
    $('#home').click(function(){
        $('.dropdownHome').slideToggle('slow');
        $('.dropdownHome').fadeTo('fast',1);
    });
});
$(document).ready(function(){
    $('#dashboard').click(function(){
        $('.dropdownDashboard').slideToggle('slow');
        $('.dropdownDashboard').fadeTo('fast',1);
    });
});
$(document).ready(function(){
    $('#contactUs').click(function(){
        $('.dropdownContactUs').slideToggle('slow');
        $('.dropdownContactUs').fadeTo('fast',1);
    });
});

Answer 1

我把它放在jsfiddle中看看。

问题是你的输入上有一个元素。使用Chrome开发工具，我找到了.newAccArea。如果你删除它或将z-index放在0以下输入有效，你可能会想以另一种方式修复它，但至少你知道它已经破坏了！

.newAccArea {
position: relative;
  bottom: 500px;
  opacity: 0;
  z-index: -5; // this for example
}

输入框不允许我输入它们

1 个答案: