1

我在一系列表单上有一个情况，我在输入框上有一个悬停提示。在少数情况下，有足够的文本将悬停元素换行到第二行下拉“覆盖”其下方的下一个表单元素。问题在于，悬停元素实际上是在下面的输入框下方而不是在下方的输入框上方，这违背了目的。

任何帮助将不胜感激。

这是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;
}
4

2 回答 2

0

在 上，如果不指定位置和值（例如或类似.field:hover .hint），您将无法获得 的好处。我建议像这样制作这些元素：position: absolute;top:0px;

.field {
  position: relative;
  height: 30px;
  z-index:100;
  display:block;

  # Just to see if it's collapsing since I can't 
  # tell if the elements inside are floating too.
  float:left; 
}

.field:hover .hint {
  position: relative;
  z-index: 101;

  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;
}

还要确保里面的元素

于 2013-04-04T20:22:34.483 回答
0

像这样更改提示类的z-index ：

.field:hover .hint {
position: absolute;
display: block;
margin: -30px 0 0 375px;
color: #FFFFFF;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.6);
z-index:10000;

-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}

编辑： 您可能想要使用与 10000 不同的值。我只是将其用于说明目的。

于 2013-04-04T20:18:33.313 回答