CODEWITHSUNDEEP
css
davidvera
davidvera

Reputation: 1489

Hover button showing a div hidden CSS

I have a simple button with a div just above that is not visible: 

<button class="dropbtn">
    <i class="fas fa-plus"></i>
</button>
<div class="dropdown-content">
    some content here ... hidden 
</div>

I want to make the dropdown content visible on mouseover. I wrote those classes: 

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.dropbtn:hover .dropdown-content {
    display:block !important;
}

Maybe i missed something ...

Upvotes: 0

Views: 45

Answers (3)

davidvera
davidvera

Reputation: 1489

I found out an alternative on W3Schools (here : https://www.w3schools.com/howto/howto_js_dropdown.asp) : 

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

And the CSS : 

/* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

Upvotes: 0

ellipsis
ellipsis

Reputation: 12152

Use + selector to apply css to an element while hover on other element

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.dropbtn:hover + .dropdown-content {
    display:block !important;
} 
<button class="dropbtn">
    <i class="fas fa-plus"></i>
</button>
<div class="dropdown-content">
    some content here ... hidden 
</div>

Upvotes: 1

Amarjit Singh
Amarjit Singh

Reputation: 1192

Add + in css code i made snippet(Adding + because your div to be shown is after your button div, your css will work if you put your hover div inside button div), you can add further css accordingly.

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.dropbtn:hover + .dropdown-content {
    display:block !important;
} 
<button class="dropbtn">Button
    <i class="fas fa-plus"></i>
</button>
<div class="dropdown-content">
    some content here ... hidden 
</div>

Upvotes: 3

Related Questions