Question

为什么当我点击输入时，它会在上面创建一个空格？ ......如何摆脱空间？

HTML：

<form method="post" id="form">
    <input type="text" class="textinput" />
    <div class="info_form">Utilizează imagini de calitate: o imagine valorează cât o mie de cuvinte!</div>
    <br/>
    <input type="text" class="textinput" />
    <div class="info_form">Utilizează imagini de calitate: o imagine valorează cât o mie de cuvinte!</div>
</form>

JS：

jQuery(document).ready(function () {
    jQuery(".info_form").hide();
    jQuery("input").on("focus", function () {
        jQuery(".info_form").hide();
        jQuery(this).next('div.info_form').show();
    });

    jQuery(document).click(function (e) {
        if (!jQuery(e.target).is('input')) {
            jQuery(".info_form").hide();
        }
    });
});

CSS：

.textinput {
    width:40%;
    padding:6px;
    color:#666;
    margin-bottom:15px;
    border: 1px solid rgba(130, 130, 130, 0.4);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    box-shadow: 0 0 10px #eaeaea inset;
    -moz-box-shadow: 0 0 10px #eaeaea inset);
    -webkit-box-shadow: 0 0 10px #eaeaea inset);
}
.info_form {
    position:relative;
    display:inline-block;
    border:1px solid #d1d1d1;
    color:#333;
    background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    padding:8px;
    top:21px;
    margin-left:10px;
    width:280px;
    font-family:"Verdana", Arial, Helvetica, sans-serif;
    font-size:13px;
    line-height: 18px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.info_form:before {
    position: absolute;
    right: 100%;
    top: 20%;
    border: solid transparent;
    content:" ";
    border-right-color: #88b7d5;
    border-width: 5px;
    margin-top: -3px;
}

Answer 1

这是因为.info_form有position: relative。你需要让它绝对定位。

.info_form {
    position: absolute;
}

但是，这会甩开定位。

这是一个解决方案，您将输入字段和气泡包装在相对定位的容器中，然后调整工具提示的z-index，使其位于顶部。

工作小提琴：DEMO

如果您不喜欢它的位置，请相应地调整left的{{1}}和top位置。

输入空间，jQuery + Css3

1 个答案:

工作小提琴：DEMO