1

在我的网络应用程序中，我有几个输入字段。当用户将鼠标悬停在输入项上时，我希望能够在输入字段的右下角显示一个小图标按钮，当用户按下它时，我希望能够显示一个带有要添加的字段的引导弹出窗口评论。

我不知道如何在输入字段上放置一个按钮。

如果我能做到这一点，我可以轻松添加弹出框并在悬停时显示等。

请帮忙......这就是我所拥有的http://jsfiddle.net/WTpPH/。

我需要设置吗

z-index: 100

或者其他的东西？

4

4 回答 4

2

根据您现有的代码，一种方法是在锚点上设置负边距。

a { margin-left: -16px; }

看到这个更新的小提琴：http: //jsfiddle.net/WTpPH/1/

另一种方法可能是将输入和锚点包装在相对定位的 div 中。然后，您可以在锚点上使用绝对定位将其准确放置在相对于 div 的位置。不过，您需要仔细设置宽度。

a { position: absolute; right: 4px; top: 4px; ... }

看到这个更新的小提琴：http: //jsfiddle.net/WTpPH/2/

于 2013-10-09T12:33:40.987 回答
1

你可以像这样position:absolute;使用z-index：

HTML

<div>
<input type="text"></input>
<a href='#'>c</a>
</div>

CSS

div{

    position:relative;
}

input{
    position:absolute;
}

a{
    background-color:red;
    position:absolute;
    left:10px;
    top:3px;
}

jsFiddle

于 2013-10-09T12:34:26.520 回答
1 
input {
    position:relative;
    z-index:9999999999999999;
}
.cc {
    position:absolute;
    left:155px;
    top:15px;
    z-index:9999999999999999999999999;
    display:none;
}

明显z-index过分夸大了>:D。关键是elements必须有一个定义position，并且z-indexofa必须比其余的更高。

$('input').focus(function () {
    $('.cc').show();
}).focusout(function () {
    $('.cc').hide();
});

小提琴

于 2013-10-09T12:39:13.503 回答
1

这是一个更加引导友好的方法..

      <form role="search">
        <div class="input-group add-on">
          <input type="text" class="form-control">
          <div class="input-group-btn">
            <button class="btn btn-default" type="submit" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Hello popover content."><strong>?</strong></button>
          </div>
        </div>
      </form>

CSS向左移动按钮：

.add-on .input-group-btn > .btn {
  border-left-width:0;left:-2px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

工作演示：http ://bootply.com/86596

于 2013-10-09T12:41:15.057 回答