Question

我有这样一个元素块：

<div class="dropdown">
  <button class="btn" >
    <i class="fa fa-search"></i>
    <i class="fa fa-caret-down"></i>
  </button>
  <input type="search"  class="search-field" placeholder="Search...">
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>
  </div>

现在，当我悬停在按钮上时，我想显示dropdown-content。 .btn:hover .dropdown-content{ dislpay: block; }无效，但是在整个块（dropdown）上空盘旋确实有效。也可以将整个块包装在另一个块中，并将<input>拉到外部块。但是我在悬停<input>时遇到了类似的问题。我的问题现在。

为什么不能显示悬停在按钮上的块
为什么将鼠标悬停在<input>上时，如果它位于外部区域（此处未在上面的代码中提供）
我该如何解决？

Answer 1

没有元素.dropdown-content。 .btn是.btn:hover + input + .dropdown-content { display: block; background: #000; }的兄弟姐妹。所以你可以使用以下代码。请检查......

＆＃13;

<div class="dropdown">
  <button class="btn" >
  button
    <i class="fa fa-search"></i>
    <i class="fa fa-caret-down"></i>
  </button>
  <input type="search"  class="search-field" placeholder="Search...">
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

＆＃13;

.btn:hover ~ .dropdown-content {

＆＃13;

或者你也可以使用{{1}}这个CSS。

Fiddle

将鼠标悬停在div-Block

1 个答案: