javascript - 悬停时显示图像

Question

我需要隐藏图像，当我将鼠标放在应该可见的位置时，它就会出现。我该怎么做？

HTML：

<img onclick="stergeSertar(this)"  onhover="arataX" src="img/x2.png" style="position: relative;aligh:center;z-index:600" class="xSertar" id="'+id+'xS">

JavaScript：

function arataX(x){
  var idX=x.id+"xS";
  $("#"+idX).toggleClass('active');
}

CSS：

.xSertar{
  position:relative;
  visibility:hidden;
  margin-left=-10px;

}

.xSertar:hover{
  position:relative;
  margin-left=-10px;
  visibility:visible;
}

Answer 1

这是您正在寻找的答案吗？http://jsfiddle.net/waFTK/

CSS

.img{
    float:left;
    width:75px;
    height:75px;
    background:url('http://www.gravatar.com/avatar/b69232a748a7a33c9a9d3dd4dba4c62c?s=75&d=identicon&r=PG');
    border:0;
    outline:0;
}

.img:hover{
    background:none;
}

您不能将鼠标悬停在不可见的元素上，这就是为什么在此处将图像设置为背景图像并在悬停时将其删除的原因。（但是该元素仍然可见。

Answer 2

HTML：

<div>
    <img src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png" />
</div>

CSS：

div {
    width:202px;
    height:202px;
    border: 1px solid #000000;
}
img {
    visibility: hidden;
}
div:hover img {
    visibility: visible;
}

http://jsfiddle.net/3zCfZ/