如何用CSS来实现鼠标经过图像凸起？

Question

如题，对<img src=""> 进行操作，能实现吗？谢谢

Answer 1

可以用改变Img坐标位置实现效果, javascript脚本如下:突起效果:
 imgObj.style.left = '-1px';
 imgObj.style.top = '-1px';正常情况:
 imgObj.style.left = '-1px';
 imgObj.style.top = '-1px';

Answer 2

放两个图片，鼠标经过（ONMOUSEOVER）时，更改成另一个图片

Answer 3

结合: IMG或其容器(比如TD)的OnMouseOvet和OnMouseOut实现.

Answer 4

谢谢大家，不想用替换图像来完成，只想通过CSS或JS来完成，因为图片太多，每张都做一个副本实在是太麻烦了

Answer 5

function Check1(i)
    {
      i.style.left = '-1px';
      i.style.top = '-1px';
    }
    function Check(i)
    {
      i.style.left = '+1px';
      i.style.top = '+1px';
    }
<img src="images\boor1.jpg" id="a" name="a" onmouseover="Check(a)" onmouseout="Check1(a)">我是像上面这样写的，怎么图像不动呢？

Answer 6

用CSS来控制应该就可以了，a:hover与a:link的样式

Answer 7

楼上能说的具体点吗？我就是不知道该怎么用a:hover来调整图片的坐标呀

Answer 8

OnMouseOvet和OnMouseOut
CSS不用图片？那只有用滤镜

Answer 9

function Check1(i)
    {
      i.style.left = '-1px';
      i.style.top = '-1px';
    }
    function Check(i)
    {
      i.style.left = '+1px';
      i.style.top = '+1px';
    }
<img src="images\boor1.jpg" id="a" name="a" onmouseover="Check(a)" onmouseout="Check1(a)">我是像上面这样写的，怎么图像不动呢？

Answer 10

这样写：<img src="images\boor1.jpg" id="a" name="a" onmouseover="Check(this)" onmouseout="Check1(this)">

Answer 11

首先得<img .... style="position:relative"...>才管用

Answer 12

把图片放到<a>标记中
然后写
a:visited img{
border-top:
border-left:
}
应该行。从前看到过比这个还复杂，相关问题可以查下手册。

Answer 13

谢谢大家，解决了，重点感谢dugupiaoyun(独孤飘云) ，ChengKing((.net: http://blog.csdn.net/ChengKing )) 

Answer 14

<style>.img{position:relative;left:1px;top:1px;}img{e:expression(onmouseover=onmouseout=function(){f()})}</style>
<script>function f(){event.srcElement.className=event.srcElement.className?'':'img';}</script>
<img src="http://www.csdn.net/ui/styles/public_header_footer/logo_csdn.gif">