So I have a navigation bar using standard Bootstrap 3 classes and structure, recently I wanted to see if you could open the drop down menus on hover.

I did some searching and found this snippet:

.dropdown:hover .dropdown-menu{
    display: block;
} 

This opens the menu on hover, which is great (without having to toggle .dropdown-toggle

My issue is that my .dropdown-toggle has a focus state, which only happens when focus is given to the element, so when I hover and the menu opens my hover state is never applied, as I do not have to click on the top menu item anymore.

So the question is: is there a way to force the :focus state when :hover is active?

I tried to do this:

.dropdown:hover #home .dropdown-toggle:focus{
    background: #00aaff;
    border: #00aaff 1px solid;
}

So basically on hover add styles to the focus, but I think what I actually need to do is add the :focus class on :hover so is this more a JavaScript thing?

So I have a navigation bar using standard Bootstrap 3 classes and structure, recently I wanted to see if you could open the drop down menus on hover.

I did some searching and found this snippet:

.dropdown:hover .dropdown-menu{
    display: block;
} 

This opens the menu on hover, which is great (without having to toggle .dropdown-toggle

My issue is that my .dropdown-toggle has a focus state, which only happens when focus is given to the element, so when I hover and the menu opens my hover state is never applied, as I do not have to click on the top menu item anymore.

So the question is: is there a way to force the :focus state when :hover is active?

I tried to do this:

.dropdown:hover #home .dropdown-toggle:focus{
    background: #00aaff;
    border: #00aaff 1px solid;
}

So basically on hover add styles to the focus, but I think what I actually need to do is add the :focus class on :hover so is this more a JavaScript thing?

• javascript
• html
• css
• twitter-bootstrap
• twitter-bootstrap-3

• have you tried just removing :focus, so you have .dropdown:hover #home .dropdown-toggle {? – Jamie Barker Commented Jan 25, 2017 at 11:48
• You cannot force :focus via pure CSS; you would have to do so via JavaScript, through the element.focus() method. – Haroldo_OK Commented Jan 25, 2017 at 11:51
• This is good to know as it points me in the correct direction. – Jesse Luke Orange Commented Jan 25, 2017 at 12:10

2 Answers 2

$(".dropdown").hover(function(){
  $('#home .dropdown-toggle').focus();
});

And in css

#home .dropdown-toggle:focus{
   background: #00aaff;
   border: #00aaff 1px solid;
}

when the focus is on, the css gets apply.

I see it as 'a JavaScript thing'. You can attach a 'mouseover' event to the menu, which, when triggered, will change the menu's CSS and the CSS of the .dropdown-toggle element.

I do not think it makes a lot of sense to trigger "focus" state for CSS modification if you are using JavaScript (in this particular example, I will use JQuery library).

A simple example: https://jsfiddle/matu2vd6/5/

HTML:

<div class='dropdown'>My dropdown element.</div>

<div class='dropdown-toggle'>My dropdown-toggle element.</div>

JS/JQUERY:

let dropDownEl = $(".dropdown");
let dropDownToggleEl = $(".dropdown-toggle");

dropDownEl.on("mouseover", function() {
  dropDownToggleEl.css({"background": "#00aaff",
    "border": "#00aaff 1px solid"});
});
dropDownEl.on("mouseout", function() {
  dropDownToggleEl.css({"background": "transparent",
    "border": "none"});
});