什么是data-mouseover属性？

在网页中，我发现了几个图像结构如下：什么是data-mouseover属性？

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

把鼠标放在他们的时候，我发现图像SRC更改其数据鼠标悬停价值，他们当鼠标没有结束时再换回。

我没有在这里和谷歌上搜索'data-mouseover'。这个属性属于哪里？（某种框架，也许？），它是如何用来实现这种效果的？

来源

2016-05-05 Alfro

这是由你已经加载的插件来完成。 – Barmar

如果您发布网页的网址，我们可能会告诉您哪个插件正在做这件事。 – Barmar

@Barmar其实，我提到的'网页'没有使用除jQuery之外的任何东西来实现这一点。我做了类似于[我写的答案]（http://stackoverflow.com/a/37055087/4257747）。我猜想，我可以编辑问题并添加网页代码本身，而不是链接到网页。 – Alfro

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

那里说的是data- * html元素的属性是一类叫做'custom attributes'的全局属性。它们允许在HTML和它的DOM表示之间交换信息，这可以/可以在脚本中使用。

在mouseover上改变图像效果的方式其实很简单，可以通过添加'mouseover''mouseout'事件监听器来实现。这里是一个简单的脚本，使用jQuery并编辑属性来实现这种效果。

$(".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">

来源

2016-05-05 16:00:06 Alfro

什么是data-mouseover属性？

回答

相关问题