选中时，悬停文本框保持固定 [英] Hover textbox remains fixed when selected

问题描述

我创建了一个搜索栏，当用户将鼠标悬停在某个按钮上时，会出现一个文本框。我想做的是保持文本框保持可见，一旦用户按下文本框。因此，如果用户不小心将鼠标移到文本框或按钮上，同时输入文本框仍保留在同一位置。

这是我的代码：

 ＃search-text {left：300px; position：relative;}。search：hover＃search-text {left：0; position：relative;}。search {background：gray; display：inline-block; padding：10px; overflow：hidden}   


$ b

我这样做，以添加过渡效果到搜索文本。我正在想使用javascript在文本框中添加一个类，但不确定如果这种方式将工作。

解决方案

尝试添加这个新的CSS当它具有焦点时，保持框可见：

 ＃search-text：focus {
 left：0px; 
} 
  



功能示例：

 ＃search-text {left：300px; position：relative;}＃search-text：focus {left：0px; } .search：hover＃search-text {left：0; position：relative;}。search {background：gray; display：inline-block; padding：10px; overflow：hidden}   

$ b

I've created a search bar when, a user hover overs a button a textbox will appear. What i want to do is keep the text box to stay visible once the user has pressed the text box. So if the user accidentally removes the mouse over the text box or button whilst typing the text box remains in the same place.

Here's my code:

$('#search-button, #search-text').hover(function searchbox () {
        $('#search-text').addClass("fixed-textbox");
    },function () {
        $('#search-text').removeClass("fixed-textbox");
    });

#search-text {
  left:300px;
  position:relative;
}
.search:hover #search-text {
  left:0;
  position:relative;
}
.search {
  background: gray;
  display: inline-block;
  padding: 10px;
  overflow:hidden
}

<div class="search">
  <input id="search-text" type="text" placeholder="type here" />
  <button id="search-button">SEARCH</button>
</div>

I've done it this way to add transition effects on to the search-text. I was thinking of adding a class on the textbox using javascript, but unsure if this way would work. Also i notice the text box changes position if you type in it with out hovering over the section.

解决方案

Try adding this new CSS style to keep the box visible when it has focus:

#search-text:focus {
  left: 0px;    
}

Functional example:

#search-text {
  left:300px;
  position:relative;
}
#search-text:focus {
  left: 0px;    
}
.search:hover #search-text {
  left:0;
  position:relative;
}
.search {
  background: gray;
  display: inline-block;
  padding: 10px;
  overflow:hidden
}

<div class="search">
  <input id="search-text" type="text" placeholder="type here" />
  <button id="search-button">SEARCH</button>
</div>

这篇关于选中时，悬停文本框保持固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！