I was working on a dropdown menu in CSS when I found something about pointer-events in Firefox 44. At first I thought it would be a mistake that happened in new version of Firefox, but I saw the problem in Firefox 25 again, and it also exists in Opera 18 (which is running webkit).
The code itself could be very confusing, so I made another sample:
div {
width: 150px;
height: 200px;
line-height: 30px;
background: #DDD;
/*- overflow-y -*/
overflow-y: auto;
/*- pointer events -*/
pointer-events: none;
}
div:hover {
background: #D77;
}
<div>
text
<br/>text
<br/>text
<br/>text
<br/>text
<br/>text
<br/>text
<br/>text
<br/>
</div>
As you see, the div element's pointer-events property is set to none, so we would expect it not to run the :hover at all.
But just go ahead and move your cursor on the scrollbar (in Firefox and Opera).
pointer-events is completely supported in all major browsers, so what's wrong? Am I missing something?
EDIT:
It's solved in newer versions of opera
but I need It to work at least on all common versions of chrome, opera and firefox
any trick or alternative way?
EDIT 2: here's the fiddle https://jsfiddle.net/ja0ct9s6/2/
at first look it work's well
but take your cursor out of it , move it in again from the right side (when you don't see the dropdown) , It look's the scrollbar still hoverable(?) (remember to use firefox)