使用JavaScript在拖动元素时强制触发:hover效果，无需jQuery

Question

3

我在这里找到了几个搜索结果，但它们都是针对jQuery的，我看过的几个与我的情况不适用。

这是一个小项目，到目前为止我避免使用jQuery。我想保持这样，以免需要该库。

基本上，我正在将一个<article>元素拖动到一个<div>元素中。 div具有封闭垃圾箱的background-image。在CSS中，当触发:hover时，它被设置为显示相同但打开的垃圾箱。

现在，当我将我的文章元素拖到div中时，:hover效果没有被触发。我该怎么做呢？

所有必需的元素都已设置为可拖动，并且已添加所需的事件侦听器，Console.log确认它们有效。

- Koen027

3

":hover"是用于当指针设备标识但不激活元素时使用的，这不是您在这里要做的，因此浏览器不会请求CSS更新。(http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes)。 - Josh

你可以使用 mouseover/mouseout 为元素附加一个类名。 - Kerstomaat

1

在标题中加入“无jQuery”并不能帮助来自搜索引擎的95%流量。仅仅不使用jQuery标签，任何jQuery答案都会被大多数人投票否决。 - ajax333221

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- walmik · Answer 1

你可以定义一个名为“open_trash”的CSS类，并在那里设置一个打开垃圾桶的背景图像，然后你可以使用JavaScript在mousedown事件中更改拖动元素的类，如下所示。

document.getElementById("draggedItem").className = "open_trash";

你可以在 onmousedown 事件中将类名设置为空字符串或其他值。