javascript - 如何在拖动时启动鼠标悬停事件

标签 javascript jquery hover draggable

当我将一个元素拖动到另一个有鼠标悬停事件的 div 上时,该事件不会触发。但是,如果我将鼠标悬停在其上而不进行拖动,它就会起作用。

如果我将另一个元素拖动到某个元素上,是否有办法检测该元素上的悬停事件?

最佳答案

在所有提出的答案中,我没有看到最简单和明显的答案(也许我在OP问题中遗漏了一些东西)。但是,如果有人后来偶然发现了这个,并且需要纯 JS 中的快速而简单的解决方案..

您可以通过更改元素 className ondragover 并更改回原始类 ondragleave

my_element.ondragover = function(ev) {  
 ev.preventDefault();  
 this.className = 'myElem_dragover';  
}  
my_element.ondragleave = function(ev) {  
 ev.preventDefault();  
 this.className = 'myElem_orig';  
}

CSS

.myElem_orig {     //this is your initial class for element
  top: 30px;
  left: 20px;
  .....
  background-color: blue;  
}  

.myElem_orig:hover {   //this is hover state, just changing bg color
  background-color: red;
}

.myElem_dragover { //new class, needs all attributes from original class
  top: 30px;
  left: 20px;
  ........ 
  background-color: red; //behaves the same like hover does
}

编辑:
忘了说了,你还需要带回原来的类ondrop,否则div将留在dragover类

关于javascript - 如何在拖动时启动鼠标悬停事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8614073/

相关文章:

javascript - 使用 Javascript 解析电子邮件源的 text/html 部分

javascript - 换行符没有出现在生成的 javascript 中我想要的位置

jquery - Bootstrap 样式不适用于打印

javascript - Emberjs不会加载jquery/javascript,在页面中插入html时运行代码

jquery - iOS 上的 CSS 悬停仅在分配了事件监听器时才有效

javascript - 在 Node.js 项目中包含 .css 和 .js 文件

javascript - 有没有一种方法可以使用类似于 contenteditable 的文本区域的用户提交值来更新 DOM?

html - 定位 href 内的特定 div 以及所有用 main div 包裹的内容,以便在 css 中悬停

javascript - 悬停子元素时保持父元素的 CSS 样式

javascript - C3.js 工具提示字体