user3735998 user3735998 - 3 months ago 19
CSS Question

Dropdown Hover State to stay active while hovering over child (text)

I am trying to keep the hover CSS state of my text button to stay while I move my cursor to the child items within the dropdown but can't seem to find the correct solution?

Everything works great except the parent item changes back to the normal state when I move my cursor down onto the child items.

CSS

.btn-primary {
color: #585a5c;
background-color: #ffffff;
border-color: #ffffff;
font-family:engravers;
font-size:13px;
text-align:center;
text-transform: uppercase;
letter-spacing: 4px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
color: #585a5c;
background-color: #ffffff;
border-color: #ffffff;
font-family:timesitalic;
font-size:15px;
text-transform: capitalize;
}


HTML

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Gallery Of Images
<!--<span class="caret"></span>--></button>
<ul class="dropdown-menu">
<li><a href="gallery/1.html">ONE</a></li>
<li><a href="gallery/2.html">TWO</a></li>
</ul>
</div>

Answer

I think you just need to change your selectors for the hover event. If I correctly understand what you want to do, you need to change this:

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #585a5c;
  background-color: #ffffff;
  border-color: #ffffff;
  font-family:timesitalic;
  font-size:15px;
  text-transform: capitalize;
}

to this:

.dropdown:hover .dropdown-toggle.btn-primary {
  color: #585a5c;
  background-color: #ffffff;
  border-color: #ffffff;
  font-family:timesitalic;
  font-size:15px;
  text-transform: capitalize;
}

The problem you're having is that you're only applying the above set of styles to the .btn-primary element when you are hovering over that particular element. This means that as soon as you take your cursor off the main nav item and onto the nav menu below, .btn-primary:hover is no longer true and the styling above stops taking effect.

To remedy this the simple solution is to specify the hover event on the whole dropdown, i.e. the parent .dropdown element that also includes .dropdown-menu. Using the hover event on this element instead means that when you switch from hovering over .btn-primary to hovering over the .dropdown-menu nav below it, .dropdown:hover is still true because you are still hovering over a child element of .dropdown.

All that then remains is to ensure your styling affects the right element, hence the targeting of .dropdown-toggle.btn-primary after the hover selector.

Is that what you were looking for?

Comments