使用jquery的toggle方法进行图片切换function quot#h1quottogglefunction quot#h1quotcssquotbackgroundimagequot，quot路径#3901b54e6jpg#39quot，function quot#h1quotcssquotbackgroundimagequot，quot路径#394041jpg#39quotltinput type=quotbuttonquot value=quothuanquot id=quoth1quot class=quothh1quot CSS hh1 background urlquot20。

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

如何使鼠标经过图片时图片变大呢，可以通过css进行简单的设置就可以了首先把内容写好了，代码为 div id=#34bianda#34 img src=#34fileCUsersAdministratorDesktopa1b4d43b0329af 66c29fcb4d6fcb127ft1280l75jpg#34 div 写入css样式，为 #bianda float right。

1假设图片外层DIV的class为pic，图片的大小是400*300，html代码可以写成下面这样 2如果希望鼠标经过时图片的尺寸变成600*450，那么在css里面只要这样定义就行了picimghoverwidth600pxheight450px 3这个代码在ie6下会不生效，因为ie6不支持除A标签外的其他元素的hover伪类如果要在i。

2 HTML结构在HTML中，为你想要变换背景的元素添加一个类名或ID，以便在CSS中引用3 CSS样式在CSS中，为这个元素设置默认的背景图片，并使用`hover`伪类来定义鼠标悬停时的样式例如css myelement backgroundimage urltransition backgroundimage 05s easeinout 可选。

源码如下 lt！DOCTYPE html CSS3鼠标滑过图片放大特效DEMO演示 htmlfontfamilysansserifmstextsizeadjust100%webkittextsizeadjust100%bodymargin0article，aside，details，figcaption，figure，footer，header，hgroup，main，nav，section，summarydisplayblockaudi。

1创建一个新的html文件如图 2在html文件上找到body标签，在这个标签里创建一个div标签并设置class类为bg如图代码3在title标签后创建style标签用来给bg类添加样式在这给bg类设置了一个宽高和背景颜色如图 代码4设置鼠标滑过div时背景变色给bg样式类添加鼠标滑过hover，然后设置。

05_01_03jpg*替换图片地址* displayblocklt！ Save for Web Slices index_05_01jpg。

要用CSS，而不是js的话，不得不用hover伪类了btn backgroundurlxxjpg norepeatbtnhover backgroundurlyyjpg norepeat不过最好是两张图片合为一个图片，这样hover的时候只要改变背景的position就行了，也不怕图片因为没有预加载而一下显示不出来最后要说的就是IE6不支持除a以外其它元素的hover伪类。

鼠标经过改变边框颜色可以直接css的hover伪类，然后定义border样式就是了如下示例代码acolor#000border1px solid #000 * 默认的样式 *ahoverbordercolor#ccc * 鼠标经过时的样式 * 鼠标经过时将边框颜色变为了灰色。

用CSS制作鼠标经过图像 XHTML代码 nav1 nav2 nav3 nav4 nav5 这里用一个菜单来讲解，在实际运用中我们可能会有其它方面的运用这里我们看到并没有图片，那是因为我们的图片都是用CSS调用的。

lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quot DTDxhtml1transitionaldtdquot 鼠标经过图片放大效果代码 padding0 margin0 html overflowmozscrollbarsvertical body font12px22px quot宋体quot wordbreak。

在DreamWeaver中实现滑动切换图片效果，可以使用‘鼠标经过图像’功能来实现，也可以用CSS控制来实现现在具体讲一下CSS控制实现图片切换效果首先制作一个ID为abc的p宽度50px高度50px在abc里面随便打一个字设置一个空链接然后定义abc宽度50px高度50pxa标签的块形式代码如下styletype=quottext。

有，直接用cssname backgroundcolor#000width50pxheight50px namehover backgroundcolor#fffwidth50pxheight50px 把以上代码写到css中 下面的就是html的了 把backgroundcolor换成img也行 希望对你有帮助。

简单的可以用csscss#onepositionrelative hiddenpositionabsolute top100pxleft200pxdisplay onehover #hiddendisplayblock 或者使用js控制var one=documentgetElementById#39one#39，hidden=documentgetElementById#39hidden#39oneonmouseover=function。