html - 鼠标悬停在字段上的文本显示

标签 html css text-decorations

我正在制作一个简单的网站注册表单。我需要显示一个文本行,上面写着“经理或客户”它只有在我将鼠标放在表单的第三个字段(类型)上时才会出现。我对这些 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 &nbsp;&nbsp;<INPUT TYPE = TEXT NAME = USERNAME>
  </p>
  
 <p>    <BR>
    USERPASS &nbsp;&nbsp;&nbsp; <INPUT TYPE="password" NAME = USERPASS>
    </p>
	<p>    <BR>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; TYPE &nbsp;&nbsp;&nbsp; <INPUT TYPE= TEXT  NAME = TYPE>
    </p>
 
 <br> <BR>
    
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<INPUT TYPE =submit name="submit"  VALUE = "LOGIN">
  </p>
</form>
</div>

</body>
</center>
<br><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<form action="home.html">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <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/

相关文章:

css - 文字装饰 : none not working

Javascript/JQuery 如何验证电话号码

javascript - 如何从自定义 HTML 侧边栏更改 Google 表格单元格中的值?

html - 如何垂直对齐单选按钮?

css - CSS 字体特性 "SS05"是什么意思?

css - 为一个元素使用多个动画

html - a 标签内的不同悬停行为。 IE 8+ 中的问题

javascript - 将屏幕坐标转换为页面坐标

html - 做 css 动画的另一种方法是什么

css - 继承文字装饰风格