需要写一个效果，鼠标放上去图片原地变身，其实就是变大了一下，刚好以前做过类似的练习，凭记忆重写了一下，不然又得去google扒文章了。
请用鼠标温柔的摸我→demo
(下面是一本黄书，请不要乱摸)
解释一下，这种效果正常写在非IE6下是没有问题的，IE6下必死，解决方法就是在a:hover{}里添加border:none或者background:none，就可以让IE6焕发青春。
主要使用了position控制图片位移，外层relative，a:hover的时候图片变身，a:hover img样式变为absolute，然后使其居中显示，效果出来了，图片一摸就变大了 (闷骚)
/*用思想去触摸未来*/
相关日志-小站地图为你展开
<![CDATA[
<ol>
<li class="comment even thread-even depth-1" id="li-comment-1479">
<div id="comment-1479">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/9f83c727b216ad23c957ff3ec4f2ed45.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.tulongzhiji.com/mopvhs/' rel='external nofollow' class='url'>MOPVHS</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 5.0.375.126' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows.png' title='Windows XP' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在623 天之前</span>
</div>
<div class="comment-text clearfix">
<p>!!!!!!!!!!</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/ie6-ahover-img?replytocom=1479#respond' onclick='return addComment.moveForm("comment-1479", "1479", "respond", "702")'>回复</a> </div>
</div>
<ul class='children'>
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-1480">
<div id="comment-1480">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/039f1f8556b02dd133ec6974036727db.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.laozhuhome.com' rel='external nofollow' class='url'>N</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 5.0.375.127' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows.png' title='Windows XP' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在623 天之前</span>
</div>
<div class="comment-text clearfix">
<p>@MOPVHS, OOOOOOOOOOOOOOOOOOOOOOOOOOO</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/ie6-ahover-img?replytocom=1480#respond' onclick='return addComment.moveForm("comment-1480", "1480", "respond", "702")'>回复</a> </div>
</div>
</li>
</ul>
</li>
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-1971">
<div id="comment-1971">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/96764fa10254db0b2b86c652d693467f.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://blueandhack.com' rel='external nofollow' class='url'>blueandhack</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 7.0.517.41' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows_win7.png' title='Windows 7' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在576 天之前</span>
</div>
<div class="comment-text clearfix">
<p>！！！！！！！！！！！！！！已经拿走~~~</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/ie6-ahover-img?replytocom=1971#respond' onclick='return addComment.moveForm("comment-1971", "1971", "respond", "702")'>回复</a> </div>
</div>
</li>
<li class="comment odd alt thread-even depth-1" id="li-comment-2592">
<div id="comment-2592">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/22b57bb2dfeec107067677c388e59ec4.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn">yy <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 7.0.517.44' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows_win7.png' title='Windows 7' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在496 天之前</span>
</div>
<div class="comment-text clearfix">
<p>我在google一扒就扒到这来了，很不好意思我的手摸了很多下黄色，你被我赚大了</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/ie6-ahover-img?replytocom=2592#respond' onclick='return addComment.moveForm("comment-2592", "2592", "respond", "702")'>回复</a> </div>
</div>
<ul class='children'>
<li class="comment byuser comment-author-admin bypostauthor even depth-2" id="li-comment-2598">
<div id="comment-2598">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/039f1f8556b02dd133ec6974036727db.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.laozhuhome.com' rel='external nofollow' class='url'>N</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 8.0.552.215' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows_win7.png' title='Windows 7' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在494 天之前</span>
</div>
<div class="comment-text clearfix">
<p>看来我亏了，额</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/ie6-ahover-img?replytocom=2598#respond' onclick='return addComment.moveForm("comment-2598", "2598", "respond", "702")'>回复</a> </div>
</div>
</li>
</ul>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2732">
<div id="comment-2732">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/af1396f2d3408e06708923c2609fc69f.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn">hhh <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/au.png" title="AUSTRALIA" alt="AUSTRALIA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/firefox.png' title='Mozilla Firefox 3.6.13' alt='Mozilla Firefox' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows.png' title='Windows Server 2003' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在463 天之前</span>
</div>
<div class="comment-text clearfix">
<p>请教下，我是鼠标放上加个边框的效果，IE6下没反应。这个是什么原因。怎么解决？</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/ie6-ahover-img?replytocom=2732#respond' onclick='return addComment.moveForm("comment-2732", "2732", "respond", "702")'>回复</a> </div>
</div>
</li>
<li class="comment even thread-even depth-1" id="li-comment-3380">
<div id="comment-3380">
<div class="comment-author vcard">
<img alt='' src='http://0.gravatar.com/avatar/cf1bc5c276af433b2367689f2abb7f75?s=80&d=%3Cpath_to_url%3E&r=G' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.hicss.net' rel='external nofollow' class='url'>海玉</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/us.png" title="UNITED STATES" alt="UNITED STATES" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 11.0.696.60' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows.png' title='Windows XP' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在382 天之前</span>
</div>
<div class="comment-text clearfix">
<p>这个是不是只有拥有webkit私有属性chrome可以看到完全体效果？其他浏览器是残缺体，哈哈！ (开怀)</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/ie6-ahover-img?replytocom=3380#respond' onclick='return addComment.moveForm("comment-3380", "3380", "respond", "702")'>回复</a> </div>
</div>
</li>
</ol>
]]>
快来吐槽吧
