Question

我正在制作验证框架类型的东西，当组件出现错误时，我想显示一个文本框，显示用户鼠标悬停时的错误。所以我创建了一个方法来做到这一点。问题是我无法将其置于正确的位置。我想要我动态创建的最外层div的底部只是在我的鼠标结束的元素之上。

function onMouseOverHandler(event) {
        var validationContent = document.createElement("div");
        validationContent.setAttribute("class", "validationErrorContent");
        for(var i = 0; i < this.validationErrors.length; ++i) {
            if(i > 0) {
                $(validationContent).append("<br>");
            }
            $(validationContent).append(this.validationErrors[i].message);
        }

        var validationDiv = document.createElement("div");
        validationDiv.setAttribute("class", "validationErrorDiv");
        validationDiv.setAttribute("id", "validationErrorDiv");
        validationDiv.appendChild(validationContent);
        $(validationDiv).offset({ top: $(this).offset().top - $(this).height(), left: $(this).offset().left + $(this).width() - 5});
        document.body.appendChild(validationDiv);
    }

这不起作用，因为此时validationDiv的高度始终为0。

如果有人需要它，这里也是相关的CSS：

 .validationErrorDiv {position: absolute; display: block;}
.validationErrorContent {position: relative; color: white; background: red; width: 150px;}

Answer 1

验证DIV将始终只有一行文字。所以你可以这样添加min-height：

.validationErrorContent {
    position: relative;
    color: white; background: red;
    width: 150px; min-height: 1em;
}

动态创建div并将其底部与另一个组件的顶部对齐

1 个答案: