我正在制作一个简单的网站注册表单。我需要显示一个文本行,上面写着“经理或客户”它只有在我将鼠标放在表单的第三个字段(类型)上时才会出现。我对这些 css 东西很陌生。如果我的问题很奇怪,我很抱歉,但我需要这样做。
<!DOctype html>
<html>
<head>
<style>
body{
background: url("2.jpg");
background-size: cover;
background-repeat: no-repeat;
}
div.transbox {
width: 400px;
height: 360px;
margin: 30px 50px;
background-color: #ffffff;
border: 2px solid;
border-radius: 25px;
opacity: 0.8;
filter: alpha(opacity=60);
}
span {
display: none;
border:1px solid #000;
height:30px;
width:290px;
margin-left:10px;
}
input:hover {
background-color: brown;
}
form:hover{
border-color: green;
}
h1 {
text-align: center;
}
</style>
</head>
<center><body>
<div class = "transbox">
<form
method = POST action = makeaccount.php>
<p>
<h1>Make Your account Here</h1>
<br> <br> USERNAME <INPUT TYPE = TEXT NAME = USERNAME>
</p>
<p> <BR>
USERPASS <INPUT TYPE="password" NAME = USERPASS>
</p>
<p> <BR>
TYPE <INPUT TYPE= TEXT NAME = TYPE>
</p>
<br> <BR>
<INPUT TYPE =submit name="submit" VALUE = "LOGIN">
</p>
</form>
</div>
</body>
</center>
<br><br><br>
<form action="home.html">
<input type="submit" style="width:100px; height:30px;" value="Back">
</form>
</html>
最佳答案
(1) 如其他答案所述,最好使用 title
属性:
<input type="text" id="userType" title="Manager or Customer" />
(2) 下一个最好的方法是使用
placeholder
属性,(如@Rhumborl 在评论中提到的):<input type="text" id="userType" title="Manager or Customer" placeholder="Manager or Customer" />
(3) 或者,您可以使用
span
按照您的输入并通过切换 display
来显示它在 hover
和/或 focus
您的 input
.示例(显示所有三个):
label { display: inline-block; width: 84px; }
span#typePrompt { display: none; }
input#userType:hover + span#typePrompt { display: inline; }
input#userType:focus + span#typePrompt { display: inline; }
<label>Username: </label><input type="text" id="userName" /><br />
<label>Password: </label><input type="text" id="userPassword" /><br />
<label>UserType: </label><input type="text" id="userType" placeholder="Manager or Customer" title="Manager or Customer" />
<span id="typePrompt">Manager or Customer</span>
<br />
关于html - 鼠标悬停在字段上的文本显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27248121/