Question

我有一系列表格的情况，我在输入框上有悬停提示。在少数情况下，有足够的文本，悬停元素包装到第二行，在其下面的下一个表单元素“下方”下降。问题是，悬停元素实际上是在输入框下方而不是在输入框下面，这种方法可能会失败。

非常感谢任何帮助。

这是HTML：

地址1： “id =”address1“/＆gt; 您的街道地址。

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

Answer 1

更改提示类的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的值。我只是将其用于说明目的。

Answer 2

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

还要确保

中的元素

CSS部分悬停在较低元素之后

2 个答案: