Question

用css的expression的来实现鼠标移入时更改图片，鼠标移出时变回原图片 不要background的方法。如何实现？

本人搭了一个github博客，使用的是hexo+next结合，我想试一下鼠标移动在我头像的时候可以更改另外一张图片，background+hover的方法我试过了，没用的，它这个并不是背景，代码就是img src，

Answer 1

可以用这样的思路：当鼠标移入时，让img隐藏，然后给img的外框（即父元素）加一个background图片，这样看到的就是这个背景图片，而当鼠标移出时，再恢复img的显示。这样就无需更改html和js了，只在css修改一下即可。

比如：

<style>
#box {background:none; width:500px; height:375px}
#box img {width:100%; height:100%}
#box:hover {background:url(另一个图片的url) no-repeat center / cover}
#box:hover img {visibility:hidden}
</style>
<div id="box">
<img src="要显示的图片url"/>
</div>

唯一需要注意的是：如果img和外框的大小不一致，那么这种方法可能效果就不是很理想，需要对外框的background做进一步的调整才行。

追问

您的想法很好，我在这个基础上修改之后就能用了，十分感谢了

Answer 2

现鼠标移入时更改图片，鼠标移出时变回原图片.
要达到这种效果，直接使用CSS定义伪元素即可实现了。
即定义鼠标还没有被访问时的状态显示为常规的背景图片：
a:hover{color: #FF00FF
background:img(src='**'/**.jpg);
}
然后定义鼠标经过时显示的背景图片：
a:active {color: #0000FF
background:img(src='**'/**.jpg);
}
总结：方法有很多种，你多想想就会出来了。

追问

我说了不要这种方法，原html里面已经是图片插入了，不能用background了

Answer 3

<img src="1.jpg" onmouseover="this.src='2.jpg';" onmouseout="this.src='1.jpg';" />

追问

我知道可以用js，但不能在原html中加入onmouseover和onmouseout，所以这个办法不行。