2013-06-05 133 views
-4

我需要隐藏图像,并且当我将鼠标放在应该可见的位置时,它会显示。我应该怎么做?在悬停上显示图像

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

'知名度:visible'不会覆盖'显示:无;'你需要在你的hover类中使用'display:block;'或'display:inline'。同样在你的html中,你需要修改** style **'align'属性,它是'text-align:center;'。正如一个侧面说明,我不认为HTML有一个ative'onhover'事件。这是'onmouseover' ... – War10ck

回答

1

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

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

你不能说是不可见的元素悬停,所以这就是为什么像在这里设置为背景图片和悬停时会删除。 (元素但仍然可见

+1

使用'background-image' – akonsu