CSS / JavaScript - Adding Focus State When an Element Hangs

Question

So, I have a navigation bar using the standard classes and Bootstrap 3 structure, I recently wanted to see if the drop-down menus can be opened on hover.

I searched and found this snippet:

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

A menu will open with a hang, which is fine (without switching .dropdown-toggle

My problem is that mine .dropdown-togglehas a state focusthat occurs only when focus is assigned to an element, so when I am in and a menu opens, my freeze state is never applied, since I no longer need to click on the top menu item.

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

I tried to do this:

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

, , , , , :focus :hover, JavaScript?

Answer 1

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

css

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

, css.

Answer 2

" JavaScript". "mouseover" , CSS CSS .dropdown-toggle.

, "" CSS, JavaScript ( JQuery).

: https://jsfiddle.net/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"});
});