javascript - 将图像 div 分成像素行并附加事件

标签 javascript html css image google-maps

我有一个包含图像的 div,它是一个垂直的颜色条。这就是我想要做的:
当您将鼠标悬停在颜色栏的任何位置时,一个文本窗口会跟随鼠标,指示颜色栏的相应值。这是我为演示目的快速制作的图像:

Mock image

我想这样做的方法是将图像分成像素行,然后将 hover 事件附加到每个像素行,然后我可以向其添加信息。 但是,我不知道该怎么做。

因此,我如何将图像分成一组像素行以向它们添加事件,或者是否有更好的方法来做到这一点?

最佳答案

我有一个想法,但有点复杂。现在我试着解释一下: 你需要重叠到你的形象,一张看不见的 table 。 您的表格必须有许多行,例如颜色变化的数量。在每一行中,您只需要一个单元格。 你可以用循环来做这个表。 使用 css,只需为所有单元格分配相同的类,这样您就可以管理所有单元格上的悬停。 如果我不清楚告诉我

关于javascript - 将图像 div 分成像素行并附加事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23631438/

相关文章:

javascript - AngularJs+ionic 将html数据发送到Controller/popupbox

javascript - 单击时如何在导航栏元素下划线?

javascript - HTML/CSS Safari block 不可见

css - Bootstrap 4列2行div响应

javascript - 如何为输入元素添加原型(prototype)?

java - HtmlUnit webscraping 带有带有 JavaScript 的下 zipper 接的 anchor 标记

javascript - 如何将 x、y、y0 以外的属性附加到 d3 中的流图层?

javascript - 找到 JQuery 元素但不可点击

html - CSS3 3D 转换和 HTML5 Canvas

html - 两列,每列三个 DIV