Image Hover
Overview
ImgHover is a simple way to use hovering image on your site.
You can use fade effect to switch hovering images as well.
Usage
If you want to provide hovering behaviour to all the images, you can write simply like below;
$(document).ready(function(){
$('img').imghover();
});
<img src="/your/path/original.gif" />
When mouse-over this image, file "/your/path/original_o.gif" shows on the element.
Bulk Setting
You can call this method on the elements other than images as well.
$(document).ready(function(){
$('div.image-container').imghover();
});
In this case, ImgHover provides the function to the images under 'image-container' element.
Options
prefix
Create hovered image by original image name and prefix.
$('img').imghover({prefix: 'hover/'});
<img src="/your/path/image1.gif" />
In this case, "/your/path/hover/image1.gif" will be provided as hovered image.
Default value is null.
suffix
Create hovered image by original image name and suffix.
$('img').imghover({suffix: '-hovered'});
<img src="/your/path/image1.gif" />
In this case, "/your/path/image1-hovered.gif" will be provided as hovered image.
Default value is 'o'. # for my colleagues ;-p
src
Specify hovered image.
Defautl value is null.
btnOnly
When ImgHover was called to container element(s), the function find only or with anchor link. This option is useful to avoid empty gif, site logo and so on.
Default value is true.
fade
You can use fade effect to switch images.
Default value is false.
fadeSpeed
The speed of fade effect.
Default value is 500.
Easy way to use
This plugin is very handy when you use this with jGlycy.
-
首先我们要进入到imagehover的官网 http://www.imagehover.io/ 1、进入网站后进行下载把 imagehover 下载下来 也可以 npm下载 npm install imagehover.css 2、下载完文件后，把文件夹放入到你项目中 引入样式 <link rel="stylesheet" href="./css/imagehover.min.css"> 3
-
通过hover改变img的src 修改content值即可改变src（在其它伪类选择器中同理） content: url(./图2.jpg); 举例 <style> img:hover{ content: url(./图2.jpg); } </style> <img src="./图1.jpg">
-
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼无标题文档 #tt{ width:291px; height:218px; overflow:hidden; } #tt1{ width:291px; height:218px; color:rgba(255,255,255,1.00); opacity:0; float:left; -webkit-transition:all 0.5s linear;
-
背景：在一个合作开发的项目当中，没有给我们提供响应的开发素材，就自己去阿里图标库寻找了类似的图标，但是存在一个鼠标滑过图标时候，图标颜色需要变化，这个时候又没有可以判断鼠标是否过来的条件，只能通过鼠标滑动函数进行判断，因此这里就需要使用css样式的方式来适配鼠标滑过时候的样式适配了。 img标签中的src的通过CSS样式改变： img的src通过content改变鼠标hover、focus时的图片