Search code examples
javascripteventsmouseenter

Don't allow the div to block parent events


I've some elments that, on dispatching the mouseenter, it creates a div that cover the selected element using a div with just borders.

Something like this:

function attachSelectorBarTo(el){
            var bar = $('#editor-selection-bar');
            bar.css({
                top:el.offset().top,
                left:el.offset().left
                width:el.outerWidth(),
                height:el.outerHeight()
            }).show();
        }
        $(function(){
            $('[editordata]').mouseenter(function(event){
                event.stopPropagation();
                attachSelectorBarTo($(this));
            }).mouseleave(function(){
                //hideSelectorBar();
            });
        });

But, the selector div is on an absolute position and the z-index is greather than the other ones. So, when i try to select another elment, the under ones don't get the mouseneter events of course. My qyestion is: there is a method to get the selector div to not block other elemnts events ?


Solution

  • Nevermind! I just found this css property!

    pointer-events:none;