CODEWITHSUNDEEP
javascript
adnan kamili
adnan kamili

Reputation: 9455

chrome pointer-events not working on hover

I am implementing simple drag drop. When ghost element hovers any background element the background should change. It i working fine on Firefox and IE but not on chrome:

Code: HTML:

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>

    <div class="ghost"></div>
 </div>

Javascript:

var dragOn = false;
$('.ghost').hide();
$('.element').on("mousedown", function(e) {
   dragOn = true;
});
$('.container').on("mousemove", function(e) {
    if(dragOn) {
        $('.ghost')[0].style.top = e.clientY - 30 + 'px';
        $('.ghost')[0].style.left = e.clientX - 20 + 'px';
        $('.ghost').show();
    }

});
$('.container').on("mouseup", function(e) {
    dragOn = false;
    $('.ghost').hide();
});

CSS:

.container {
    height : 340px;
    width:330px;
    border: 1px solid;
    cursor: default;

}

.element {
    height : 40px;
    width:30px;
    border: 1px solid red;
    float :left;
    margin:4px;
}

.element:hover {

    border: 1px solid blue;
    background-color:blue;
    opacity: 0.7;
}

.ghost {
    height : 40px;
    width:30px;
    border: 1px solid green;
    background-color:yellow;
    opacity: 0.7; 
    pointer-events: none;
    position:fixed;
}

Following is my fiddle:

http://jsfiddle.net/tzye712k/2/

Upvotes: 0

Views: 458

Answers (1)

Huangism
Huangism

Reputation: 16438

Could be a bug in chrome, but you can implement a workaround using jquery

http://jsfiddle.net/tzye712k/3/

$( ".element" ).on({
  mouseenter: function() {
    // define a css class and addClass here if you want
    $(this).css('background-color','blue');
  }, mouseleave: function() {
    $(this).css('background-color','transparent');
  }
});

Chain them together if you want

$(".element").on({
    mouseenter: function () {
        $(this).css('background-color', 'blue');
    },
    mouseleave: function () {
        $(this).css('background-color', 'transparent');
    },
    mousedown: function () {
        dragOn = true;
    }
});

Upvotes: 1

Related Questions