Question: so here is my problem: I have 2 divs, and using javascript I made a simple tab menu with 2 tabs. When my mouse is over the tab1, the div1 has opacity 1 and the div2 opacity 0 and when the mouse is over tab2 the opposite.

Now, even if the opacity of the div is 0, the links or other elements that change the cursor still interact with the mouse. I want them fully disabled, like the did not exists. I used disables="disabled" but still didn't work.

What can i do to completely disable the div? (in javascript only, not jquery).
Should I use z-index?

I have read other topics but still haven't found a solution.

Thank you in advance.

Answer: 
Use `elem.style.visibility = "hidden"` instead of `opacity`.

---

You could use `elem.style.display = "none"` instead, but that will impact the page flow, which may not be what you want.
You'll find many examples of inline tabs, and the standard way is to use display none or position absolute:

```
{display:"none";}

```

or:

```
{position:absolute;top:-9999px;}

```

to get back to the original state:

```
{display:"";}

```

As @user1689607 said, this will affect the layout, but in practice this is often what you want with tabs (you don't want to leave an empty area on the page).