I have a structure like below and I want to `toggle active` the currently hovered `.item` element.
I'm using a simple Vanilla JavaScript function that I usually use for click-like situations and it works.

```js
function myFunction(e) {
  var elems = document.querySelectorAll(".hover");
  [].forEach.call(elems, function(el) {
    el.classList.remove("hover");
  });
  e.target.classList.add("hover");
}
```

```html
<div class="main-container">
  <div class="item hover" onmouseover="myFunction(event)">
    <a href="#">item 1</a>
  </div>
  <div class="item" onmouseover="myFunction(event)">
    <a href="#">item 2</a>
  </div>
  <div class="item" onmouseover="myFunction(event)">
    <a href="#">item 3</a>
  </div>
</div>
```

So far so good, but here comes the tricky part. When the mouse goes to a sibling element the hover correctly is changing to the inner one.

I tried some CSS ticks but I can't manage to make it work, any thoughts would be much appreciated

> 
> **P.S.** I prefer Vanilla JavaScript than jQuery
> 
> 
>