CODEWITHSUNDEEP
htmlcss
Subhan Asadli
Subhan Asadli

Reputation: 330

Hovering over button has no effect unlike hovering over div-Block

I have such a block of elements:

<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>

Now I want to display the dropdown-content when I am hovering just over button. .btn:hover .dropdown-content{ dislpay: block; } has no effect, however hovering over the whole block (dropdown) does work. It is also possible to wrap the whole block in an another block and pull the <input> to the outer block. But than I'm getting a similar problem with hovering over <input>. My questions are now.

Upvotes: 1

Views: 51

Answers (1)

Ali
Ali

Reputation: 1336

There is no element .btn .dropdown-content. .dropdown-content is a sibling of .btn. So you can use following code. Please check...

.btn:hover + input + .dropdown-content { 
  display: block; 
  background: #000;
}
<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>

Or you can use .btn:hover ~ .dropdown-content { this CSS also.

Fiddle

Upvotes: 2

Related Questions