Question

我试图在关注搜索框时隐藏按钮，并在焦点出现时显示它。

<div class="top-bar">
    <div class="search-container">
        <button >MyButton</button>
         <button >MyButton2</button>
         <button >MyButton3</button>

        <input class="search" type="search" placeholder="Search">
    </div>
</div>

的CSS

.top-bar {
    height: 35px;
    width: 100%;
    padding-top: 5px;
    background-color: #f5f5f5;
}
.search-container {
    max-width: 950px;
    margin: auto;
    padding-right: 10px;
}
.search {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 5px;
    width: 75px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    float: right;
}
.search:focus {
    width: 200px;
}

Working Fiddle

但它没有正常工作。任何想法???

Answer 1

CSS中没有先前的选择器。如果您想要所需的效果，您的按钮需要在HTML标记的搜索字段之后。

然后，您可以使用general sibling selector (~)。

＆＃13;

.top-bar {
    height: 35px;
    width: 100%;
    padding-top: 5px;
    background-color: #f5f5f5;
}
.search-container {
    max-width: 950px;
    margin: auto;
    padding-right: 10px;
}
.search {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 5px;
    width: 75px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    float: right;
}
.search:focus {
    width: 200px;
}
.search:focus ~ button {
    display:none;
}

＆＃13;

<div class="top-bar">
    <div class="search-container">
        <input class="search" type="search" placeholder="Search">
        <button >MyButton</button>
        <button >MyButton2</button>
        <button >MyButton3</button>
    </div>
</div>

＆＃13;

Answer 2

您需要在input之前移动button'字段，然后将其添加到CSS中，稍微修改HTML结构：

.search:focus ~ button {
     display: none;
}

在上面的CSS中，我使用了general sibling selector，即~，separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

<强> jsFiddle demo

＆＃13;

.top-bar {
  height: 35px;
  width: 100%;
  padding-top: 5px;
  background-color: #f5f5f5;
}
.search-container {
  max-width: 950px;
  margin: auto;
  padding-right: 10px;
}
.search {
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 5px;
  width: 75px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
  float: right;
}
.search:focus {
  width: 200px;
}
.search:focus ~ button {
  display: none;
}

＆＃13;

<div class="top-bar">
  <div class="search-container">
    <input class="search" type="search" placeholder="Search">
    <button>MyButton</button>
    <button>MyButton2</button>
    <button>MyButton3</button>
  </div>
</div>

＆＃13;

Answer 3

在HTML中，将输入标记放在按钮上方。

并将以下内容添加到CSS：

.search:focus ~ button {
    display:none;
}

隐藏搜索框焦点上的按钮

3 个答案: