你现在的效果应该是鼠标移上去之后会变成另外一张图片使用的是CSS的伪类，alink color #FF0000* 未访问的链接 * avisited color #00FF00* 已访问的链接 * ahover color #FF00FF* 鼠标移动到链接上 * aactive color #0000FF* 选定的链接 * 提示在 CS。

鼠标移出时，通过closeDiv移除这个div closeDivquotdescriptionquot* Sart 移除元素方法 * function closeDivobj var divobj = documentgetElementByIdobjdivobj * End移除元素方法 * * Start 兼容代码 让火狐兼容insertAdjacentHTML 属性 * i。

如图，获取img，转成JS对象，加个0就可以转js对象了5然后设定经过事件，切换成另一张图片，这样就产生鼠标经过切换图片的效果了6但是一旦鼠标离开了，就要切换回原来的图片素材，所以再加一个离开事件，这样离开后就变换成原来的图片7如图，现在我的鼠标在图片上，就变成twopicture了。

ltdiv id=quotpic_lstquot lt！ onclick or onmouseover ltimg src=quot1gifquot alt=quotalt1quot onmouseover=quotdoShowPicthissrc，thisaltquotltbr ltimg src=quot2gifquot alt=quotalt2quot onmouseover=quotdoShowPicthissrc，thisaltquotltbr ltimg src=quot3gifquot alt=quotalt3quot onmouseover=quotdoShowPic。

那个透明的盒子是单独写的，写好后，使用绝对定位将其移到图片盒子区域外比如说left9999px，图片要求使用overflowhidden，这样刚开始的时候就看不见文字，然后给图片添加hover伪类，改成你需要定位的值，鼠标移上去显示出来要慢慢下滑出来或者其他动态出来，使用css的过渡效果就行了。

每当点击一下图片时a在原来基础上+1 imgclickfunction a=a+1判断a除以2的余数任何数除以2都只会有2个余数，0或1，当余数=1时，div1显示，其他情况下，div2显示，div1消失if a%2=1 div1cssquotdisplayquotquotblockquotdiv2cssquotdisplayquotquotquot。

1， 2 外面包一层 div 称为3，并且 2 预设 display 设定为 隐藏 当鼠标滑过 3 ，就把 3hover 2 的 display 打开block 即可 不懂可以私信问我详细。

1打开hbuilder，在空白的html文件上面设置一个div，给div一个class并命名为img2在css里设置img的类一定的宽和高，引入示例图片，设置图片为不重复并且给img的类设置“hover”伪类，设置伪类内的透明度为063打开浏览器，在浏览器内查看效果4将鼠标移入图片，就会发现图片已经变亮了。

jpgquotltdivltdivltstyledivpositionrelative width800px marginautoimgpositionabsolute zindex0img2left150px top100pximg1hoverzindex1ltstyle利用hover伪类就可以实现，自己再稍微修改下就可以了，解决请采纳。

css让鼠标悬浮旋转出现另一张图片鼠标拿开旋转消失，可以尝试一下代码 xwcms margin 0 autowebkitborderradius 110pxborderradius 110pxwebkittransition webkittransform 02s easeoutmoztransition moztransform 02s easeoutotransition otransform 02s。

两张图片放到一个div里面，一个显示 一个隐藏ltdiv class=quotimglistquotltimg class=quotshowquot src=quotajpgquotltimg class=quothiddenquot src=quotbjpgquotltdivltstyleimglist showdisplayblockimglist hiddendisplay ltstyle ltscript$documentreadyfunction $quot。

ltstyle type=quottextcssquot img border0height100px width150px td img margin0 10px ltstyle lthead ltbody lt！ 纵向向无缝滚动 ltdiv id=quotdemoquot style=quotoverflowhiddenheight350pxwidth200pxquot ltdiv id=quotdemo1quot lta href=quot#quot target=quot_blankquotltimg。

首先在页面上把这个下面的方框实现出来，就举例是一个div，然后css中做一个类或者类似的办法，例如jquery里面的show和hide方法，这样在js中在写一个事件，当鼠标放到上面小的区域里面的时候，就触发，让css的display属性显示，鼠标移出的时候在恢复回去。

lt！DOCTYPE htmllthtmlltheadltmeta charset=utf8lttitleddlttitleltstyle li img display lihover img displayblock ltstyleltheadltbodyltulltli ltdivs。

function $quot#div1quotmouseoverfunction $quot#div2quotstopanimate top 0 ， 100， function 动画之后执行的函数 mouseoutfunction $quot#div2quotstopanimate top 200 ， 100， function 动画之后执行的函数。

1先在找个文件夹创建文件indexhtml2然后用能编辑文本文件的软件打开indexhtml，indexhtml的初始内容如图3接着编写两个样式作为鼠标移动时div修改的样式4然后编写js代码修改div的样式5编辑完indexhtml后保存，在浏览器中打开indexhtml效果如图鼠标移入移出div时，div的样式改变。