如何在輸入文本欄位旁邊對齊懸停文本？

當我將滑鼠懸停在輸入文本欄位上時，懸停文本應顯示在輸入文本欄位旁邊，但在我的代碼中，懸停文本顯示在輸入文本欄位下方。誰能給我一個解決方案。下面是我的代碼。

label {
  display: inline-block;
  width: 84px;
}

span#typePrompt {
  display: none;
}

input#userName:hover span#typePrompt {
  display: inline;
}

input#userName:focus span#typePrompt {
  display: inline;
}

<div class="row">
  <div class="col-sm-7 col-md-offset-2 form-group">
    <label class="col-md-6">User Name <span class="star">*</span></label>
    <div class="col-md-6">
      <form:input type="text" class="form-control" path="userName" id="userName" maxlength="100" />
      <span id="typePrompt">Allow only letters</span>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

您的代碼不起作用，因為form-control引導程式中的類。
form-control類有width: 100%, 和display: block，所以span#typePrompt不能行內顯示，所以它換行。
我通過使用d-flex類和w-50類來解決它。

label {
  display: inline-block;
  width: 84px;
}

span#typePrompt {
  display: none;
}

input#userName:hover span#typePrompt {
  display: inline;
}

input#userName:focus span#typePrompt {
  display: inline;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-7 col-md-offset-2 form-group">
    <label class="col-md-6">User Name <span class="star">*</span></label>
    <div class="col-md-6 d-flex">
      <input type="text" class="form-control w-50" path="userName" id="userName" maxlength="100" />
      <span id="typePrompt">Allow only letters</span>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

您可以在懸停時將input標記和span訊息文本包裝在一起，display: flex;然后顯示。的input標簽寬度設定為100%上懸停。

注意：我用于white-space: nowrap;不中斷訊息文本行。

label {
    display: inline-block;
    width: 84px;
}
.input-wrap{
    display: flex;
    align-items: center;
}
.input-wrap:hover input#userName,
.input-wrap input#userName:focus{
    width: 100%;
    display: inline-flex;
    margin-right: 10px;
}
span#typePrompt {
    display: none;
    white-space: nowrap;
}
.input-wrap:hover span#typePrompt,
.input-wrap input#userName:focus span#typePrompt{
    display: inline;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container py-4">
    <div class="row">
        <div class="col-sm-7 col-md-offset-2 form-group">
            <label class="col-md-6">User Name <span class="star">*</span></label>
            <div class="col-md-6">
                <div class="input-wrap">
                    <input type="text" class="form-control" path="userName" id="userName" maxlength="100" />
                    <span id="typePrompt">Allow only letters</span>
                </div>
            </div>
        </div>
    </div>
</div>

uj5u.com熱心網友回復：

應該有一個懸停屬性。標簽.懸停{}

uj5u.com熱心網友回復：

我不知道語法 form:input? 這是表單助手還是什么？無論如何，我改變了這一點，因為@ProfessorAbronsius 和 SatoTakeru 已經正確地指出了這一點。然后我將輸入和標簽欄位包裹在一個表單標簽中。

所以你的代碼是正確的，除了表單：輸入。所以我的回答只是為了完整性和好奇心，實際上 form:input 是什么？

label {
  display: inline-block;
  width: 84px;
}

span#typePrompt {
  display: none;
}

input#userName:hover span#typePrompt {
  display: inline;
}

input#userName:focus span#typePrompt {
  display: inline;
}

<form>
<div class="row">
  <div class="col-sm-7 col-md-offset-2 form-group">
    <label class="col-md-6">User Name <span class="star">*</span></label>
    <div class="col-md-6">
      <input type="text" class="form-control" path="userName" id="userName" maxlength="100" />
      <span id="typePrompt">Allow only letters</span>
    </div>
  </div>
</div>
</form>

標籤：html css

上一篇：為表單中的x輸入重復影像

下一篇：如何在javascript中使用回圈獲取多個復選框值？