你現(xiàn)在的效果應(yīng)該是鼠標(biāo)移上去之后會(huì)變成另外一張圖片使用的是CSS的偽類，alink color #FF0000* 未訪問的鏈接 * avisited color #00FF00* 已訪問的鏈接 * ahover color #FF00FF* 鼠標(biāo)移動(dòng)到鏈接上 * aactive color #0000FF* 選定的鏈接 * 提示在 CS。

鼠標(biāo)移出時(shí)，通過closeDiv移除這個(gè)div closeDivquotdescriptionquot* Sart 移除元素方法 * function closeDivobj var divobj = documentgetElementByIdobjdivobj * End移除元素方法 * * Start 兼容代碼 讓火狐兼容insertAdjacentHTML 屬性 * i。

如圖，獲取img，轉(zhuǎn)成JS對(duì)象，加個(gè)0就可以轉(zhuǎn)js對(duì)象了5然后設(shè)定經(jīng)過事件，切換成另一張圖片，這樣就產(chǎn)生鼠標(biāo)經(jīng)過切換圖片的效果了6但是一旦鼠標(biāo)離開了，就要切換回原來的圖片素材，所以再加一個(gè)離開事件，這樣離開后就變換成原來的圖片7如圖，現(xiàn)在我的鼠標(biāo)在圖片上，就變成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。

那個(gè)透明的盒子是單獨(dú)寫的，寫好后，使用絕對(duì)定位將其移到圖片盒子區(qū)域外比如說left9999px，圖片要求使用overflowhidden，這樣剛開始的時(shí)候就看不見文字，然后給圖片添加hover偽類，改成你需要定位的值，鼠標(biāo)移上去顯示出來要慢慢下滑出來或者其他動(dòng)態(tài)出來，使用css的過渡效果就行了。

每當(dāng)點(diǎn)擊一下圖片時(shí)a在原來基礎(chǔ)上+1 imgclickfunction a=a+1判斷a除以2的余數(shù)任何數(shù)除以2都只會(huì)有2個(gè)余數(shù)，0或1，當(dāng)余數(shù)=1時(shí)，div1顯示，其他情況下，div2顯示，div1消失if a%2=1 div1cssquotdisplayquotquotblockquotdiv2cssquotdisplayquotquotquot。

1， 2 外面包一層 div 稱為3，并且 2 預(yù)設(shè) display 設(shè)定為 隱藏 當(dāng)鼠標(biāo)滑過 3 ，就把 3hover 2 的 display 打開block 即可 不懂可以私信問我詳細(xì)。

1打開hbuilder，在空白的html文件上面設(shè)置一個(gè)div，給div一個(gè)class并命名為img2在css里設(shè)置img的類一定的寬和高，引入示例圖片，設(shè)置圖片為不重復(fù)并且給img的類設(shè)置“hover”偽類，設(shè)置偽類內(nèi)的透明度為063打開瀏覽器，在瀏覽器內(nèi)查看效果4將鼠標(biāo)移入圖片，就會(huì)發(fā)現(xiàn)圖片已經(jīng)變亮了。

jpgquotltdivltdivltstyledivpositionrelative width800px marginautoimgpositionabsolute zindex0img2left150px top100pximg1hoverzindex1ltstyle利用hover偽類就可以實(shí)現(xiàn)，自己再稍微修改下就可以了，解決請(qǐng)采納。

css讓鼠標(biāo)懸浮旋轉(zhuǎn)出現(xiàn)另一張圖片鼠標(biāo)拿開旋轉(zhuǎn)消失，可以嘗試一下代碼 xwcms margin 0 autowebkitborderradius 110pxborderradius 110pxwebkittransition webkittransform 02s easeoutmoztransition moztransform 02s easeoutotransition otransform 02s。

兩張圖片放到一個(gè)div里面，一個(gè)顯示 一個(gè)隱藏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！ 縱向向無縫滾動(dòng) ltdiv id=quotdemoquot style=quotoverflowhiddenheight350pxwidth200pxquot ltdiv id=quotdemo1quot lta href=quot#quot target=quot_blankquotltimg。

首先在頁面上把這個(gè)下面的方框?qū)崿F(xiàn)出來，就舉例是一個(gè)div，然后css中做一個(gè)類或者類似的辦法，例如jquery里面的show和hide方法，這樣在js中在寫一個(gè)事件，當(dāng)鼠標(biāo)放到上面小的區(qū)域里面的時(shí)候，就觸發(fā)，讓css的display屬性顯示，鼠標(biāo)移出的時(shí)候在恢復(fù)回去。

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

function $quot#div1quotmouseoverfunction $quot#div2quotstopanimate top 0 ， 100， function 動(dòng)畫之后執(zhí)行的函數(shù) mouseoutfunction $quot#div2quotstopanimate top 200 ， 100， function 動(dòng)畫之后執(zhí)行的函數(shù)。

1先在找個(gè)文件夾創(chuàng)建文件indexhtml2然后用能編輯文本文件的軟件打開indexhtml，indexhtml的初始內(nèi)容如圖3接著編寫兩個(gè)樣式作為鼠標(biāo)移動(dòng)時(shí)div修改的樣式4然后編寫js代碼修改div的樣式5編輯完indexhtml后保存，在瀏覽器中打開indexhtml效果如圖鼠標(biāo)移入移出div時(shí)，div的樣式改變。