Updated Fiddle

Question

我有一个搜索栏，当你点击它时会展开。我遇到opacity的问题。我需要将opacity设置为0，直到它悬停在或上展开。我会检测它们是否有悬停，但是第二个用户鼠标指针离开文本区域再次变为透明。

我有一个小提琴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;
}

Answer 1

尝试将opacity:1添加到search:focus

.search:focus {
    opacity:1;

fiddle

Answer 2

只需将.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; opacity:1; }添加到data Foobar x = Foo (x (Foobar x))选择器：

Show

如何检测我的搜索栏是否已展开？

2 个答案:

Updated Fiddle