我在一系列表单上有一个情况,我在输入框上有一个悬停提示。在少数情况下,有足够的文本将悬停元素换行到第二行下拉“覆盖”其下方的下一个表单元素。问题在于,悬停元素实际上是在下面的输入框下方而不是在下方的输入框上方,这违背了目的。
任何帮助将不胜感激。
这是HTML:
Address1: " id="address1" /> 您的街道地址。<div class="field">
<label for="address2">Address2:</label>
<input type="text" class="input" name="address2" value="<?php if ($row_GuestLookup['customer_fname']) { echo $row_GuestLookup['address2']; } ?>" id="address2" />
<p class="hint">Any extra street address information if necessary.</p>
</div>
<div class="field">
<label for="city">City:</label>
<input type="text" class="input" name="city" value="<?php if ($row_GuestLookup['customer_fname']) { echo $row_GuestLookup['city']; } ?>" id="city" />
<p class="hint">Your city.</p>
</div>
这是相关的CSS。
#defaultform {
width: 600px;
margin-left: auto;
margin-right: auto;
padding: 20px;
background: #f0f0f0;
overflow:auto;
/* Border style */
border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
/* Border Shadow */
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}
.hint{
display: none;
}
.field {
position: relative;
height: 30px;
}
.field:hover .hint {
position: absolute;
display: block;
margin: -30px 0 0 375px;
color: #FFFFFF;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.6);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}