javascript - 如何创建仅在鼠标悬停在图像顶部时显示的菜单或链接

Question

我有一个图片库，其中包含可供用户使用的插入/替换/删除图片选项。我已经在每个图像的顶部显示了这些选项（替换图像和删除图像）。并且该选项仅在鼠标悬停特定图像时显示。

鼠标悬停时如何使选项显示缓慢

CSS

.wrap{
    position:relative;
    display:inline-block;
    }


.toggle
{   font-weight:bold;
    position:absolute;
    top:1px;  
    right:0;

    padding:0px;
    width:100%;

    text-align:right;
    /*visibility:hidden;*/
    display:none;

}   


.toggle a
{   
    text-decoration:none;
     background:#000;
    padding:0;    
    font-size:10px;  
    color:white;
    line-height:100%;
    cursor:arrow;
}


.wrap:hover .toggle
{
    /*visibility:visible;  */
    display: block;
}

HTML

 <div class="wrap">
<A name=1 href="image.php?imageid=<?php echo $imageid ?>&imageindex=<?php echo ((($page-1)*15)+$index-1) ;  ?> "><IMG  border=0 src="<?php echo $thumbpath; ?>" height="75" width="75" alt="<?php echo $caption ?>" title="<?php echo $caption ?>" ></A><BR>
<div class="toggle">
<?php
echo "<a href='delete.php?delete=yes&imageid=".$imageid.'&page='.$page."'>Delete </a>"
?>
<br>
<?php
echo "<a href='replace.php?update=yes&imageid=".$imageid.'&page='.$page."'>Replace </a>"
?>
</div>
</div>

Answer 1

需要切换的 div 的使用display:none和属性。position:absolute

HTML

<div class="wrap">
    <img src="http://static.adzerk.net/Advertisers/d18eea9d28f3490b8dcbfa9e38f8336e.jpg" />
    <div class="toggle"><a href="#">REPLACE IMAGE</a> <a href="#"> DELETE IMAGE</a></div>
</div>

CSS

.wrap{
    position:relative;
    display:inline-block
}
.toggle{
    position:absolute;
    top:0;  
    background:Black;
    padding:4px;
    width:100%;
    display:none
}
a{
    background:red;
    padding:2px;    
    font-size:12px;  
}
.wrap:hover .toggle{
    display:block
}

演示