html鼠标停留在图片转换,css或者js如何实现，当鼠标指上对应的图片的时候，换一张图片，也就是修改src？...

如果你想实现 hover 的的效果，

如果每张图片都会触发替换src，则在 img 标签中，再加一个attr，data-src,data-src 存放你需要替换的图片路径。

你的html应当这样子写：

更新： 由于你需要一个简单地动画，所以我就给你做了一个动画。javascript 只更改了一点内容，就是切换className. 动画使用css3 animation 做的，因此兼容IE10+ 除了javascript的改动之外，你需要添加一段css样式。

var imgHoverReplaceSrc = {

init: function (sel) {

this.sel = sel || "img";

this.imgList = document.querySelectorAll(sel);

this.work();

},

work: function () {

var _this = this;

this.imgList.forEach(function (item) {

item.addEventListener("mouseenter", function () {

_this.changeSrc(item);

item.className = "left";

});

item.addEventListener("mouseleave", function () {

_this.changeSrc(item);

item.className = "right";

});

});

},

changeSrc: function (item) {

if (item.getAttribute('data-src')) {

var tmpSrc = item.src;

item.src = item.getAttribute('data-src');

item.setAttribute('data-src', tmpSrc);

}

}

}

imgHoverReplaceSrc.init("img");

css样式：

img {

width: 100px;

height: 100px;

}

img.left{

animation: imgFadeFromLeft .5s ;

-webkit-animation: imgFadeFromLeft .5s ;

-moz-animation:imgFadeFromLeft .5s ;

-o-animation: imgFadeFromLeft .5s ;

}

img.right{

animation: imgFadeFromRight .5s ;

-webkit-animation: imgFadeFromRight .5s ;

-moz-animation:imgFadeFromRight .5s ;

-o-animation: imgFadeFromRight .5s ;

}

@keyframes imgFadeFromLeft {

from{

opacity: 0;

transform:translateX(20px);

}to{

opacity:1;

transform:translateX(0px);

}

}

@-moz-keyframes imgFadeFromLeft {

from{

opacity: 0;

transform:translateX(20px);

}to{

opacity:1;

transform:translateX(0px);

}

}

@-webkit-keyframes imgFadeFromLeft {

from{

opacity: 0;

transform:translateX(20px);

}to{

opacity:1;

transform:translateX(0px);

}

}

@-o-keyframes imgFadeFromLeft {

from{

opacity: 0;

transform:translateX(20px);

}to{

opacity:1;

transform:translateX(0px);

}

}

@keyframes imgFadeFromRight {

from{

opacity: 0;

transform:translateX(20px);

}to{

opacity:1;

transform:translateX(0px);

}

}

@-moz-keyframes imgFadeFromRight {

from{

opacity: 0;

transform:translateX(20px);

}to{

opacity:1;

transform:translateX(0px);

}

}

@-webkit-keyframes imgFadeFromRight {

from{

opacity: 0;

transform:translateX(20px);

}to{

opacity:1;

transform:translateX(0px);

}

}

@-o-keyframes imgFadeFromRight {

from{

opacity: 0;

transform:translateX(20px);

}to{

opacity:1;

transform:translateX(0px);

}

}

效果如下(加上动画)：