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/

在悬停时显示图像

2 个答案: