Question

我正在实施简单的拖放。当ghost元素悬停任何背景元素时，背景应该改变。它我在Firefox和IE上运行良好，但在Chrome上没有：

代码：的 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;
}

以下是我的小提琴：

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

Answer 1

可能是Chrome中的错误，但您可以使用jquery

实现变通方法

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

property bool update

如果你想要将它们连在一起

$( ".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');
  }
});

chrome指针 - 事件在悬停时无效

1 个答案: