0
私はあなたがそれをクリックすると拡大する検索バーを持っています。 opacityに関する問題が発生しています。 またはが展開されるまで、opacityを0に設定する必要があります。鉱山は、彼らがホバリングしたかどうかを検出しますが、2番目のユーザーのマウスポインタがテキスト領域を離れると再び透明になります。検索バーが拡張されているかどうかを検出するにはどうすればよいですか？
私はフィドルhereを持っています。
にはどうすればいいだけは検索バーが展開されていない場合0に設定不透明度を維持し、他のすべてのシナリオで1にそれを設定することができますか？
HTML：
<form class="search-container" action="#">
<input id="search" type="text" class="search" name="q" />
<label for="search"><span class="search-t">Go</span></label>
<input type="submit" id="search-s" />
</form>
CSS：
.search {
-webkit-transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
width: 40px;
height: 40px;
border-radius: 20px;
border: none;
cursor: pointer;
opacity: 0;
}
.search + label .search-t {
color: black;
}
.search:hover {
color: white;
opacity: 1;
background: #c8c8c8;
box-shadow: 0 0 0 5px #3d4752;
}
.search:hover + label .search-t {
color: white;
}
.search:focus {
-webkit-transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
border: none;
outline: none;
box-shadow: none;
padding-left: 15px;
cursor: text;
width: 250px;
border-radius: auto;
background: #ebebeb;
color: black;
}
.search:focus + label .search-t {
color: black;
}
.search:not(:focus) {
text-indent: -5000px;
}
#search-s {
position: relative;
left: -5000px;
}
.search-t {
position: relative;
left: -30px;
color: white;
cursor: pointer;
}
は - 素晴らしい作品。ありがとうございました！ – maxshuty