显示悬停图像

Show image on hover

本文关键字：图像 悬停 显示      更新时间：2023-09-26

我需要隐藏一个图像，当我把鼠标放在应该可见的地方时，它出现了。我该怎么做呢?

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;
}

这是你正在寻找的答案吗?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;
}

你不能悬停在一个不可见的元素上，所以这就是为什么图像在这里被设置为背景图像，并在悬停时被删除。

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/

相关文章：