Question

我正在制作一个简单的网站注册表格。我需要显示一条文字说“＆＃34;经理或客户＆＃34;当我将鼠标放在表单的第三个字段（类型）上时，它才会出现。我是这些css的新手。如果我的问题很奇怪但是我需要这样做，我就是太棒了。

＆＃13;

<!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>

＆＃13;

Answer 1

使用title属性！

<input type="text"  name="type" title="Manager or customer" />

Answer 2

（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 {/ 1}}和/或hover focus来显示它}}

示例（显示所有三个）：

＆＃13;

input

＆＃13;

label { display: inline-block; width: 84px; }
span#typePrompt { display: none; }
input#userType:hover + span#typePrompt { display: inline; }
input#userType:focus + span#typePrompt { display: inline; }

＆＃13;

Answer 3

您可以使用title属性

来实现此目的

<input type="text"  name="type" title="Manager or customer">

Answer 4

如果要在鼠标输入时显示，可以添加以下代码

$("#type").mouseenter(function(){
    $(".textdis").show();
});
$("#type").mouseleave(function(){
    $(".textdis").hide();
});

将其添加到您的HTML

 <p class="textdis">Manager or customer</p>

检查一下 http://jsfiddle.net/nikkirs/6jh944fn/5/

或者

如果您希望在文本框中显示它，那么您可以使用占位符=＆＃34;经理或客户＆＃34;在输入字段

Answer 5

您可以使用这一行 <div title="Hey show me the !!">hover me</div>

鼠标在字段上的文本显示

5 个答案: