Question

在网页上，我找到了几张具有以下结构的图片：

<img src="/image.png"
     class="images"
     data-mouseover="/mouse_over_image.png">

当鼠标放在它们上面时，我发现图像 src 会更改为数据鼠标悬停值，并且当鼠标不再显示时它们会变回

我没有通过搜索'数据鼠标悬停'在这里或谷歌上找不到任何东西。这个属性属于哪里？（某种框架，也许？），它是如何用来实现这种效果的？

Answer 1

在MDN上搜索我找到了有关data-* global attributes的信息。

它说html元素的 data - * 属性是一类称为“自定义属性”的全局属性。它们允许在HTML及其DOM表示之间交换信息，这些信息可以/可以在脚本中使用。

在鼠标悬停上更改图像的效果实际上非常简单，可以通过添加“mouseover”'mouseout'事件侦听器来实现。这是一个使用jQuery并编辑 data - * 属性的简单脚本来实现此效果。

$(".img_change").mouseover(function() {
  $(this).data("mouseout", this.src);
  this.src = $(this).data("mouseover");

});
$(".img_change").mouseout(function() {
  this.src = $(this).data("mouseout");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<img src="http://i65.tinypic.com/e7dnas.png" class="img_change" data-mouseover="http://i66.tinypic.com/2j5x6l1.png">

什么是属性data-mouseover？

1 个答案: