0

ユーザーが使用できる画像の挿入/置換/削除オプションを備えた画像ギャラリーがあります。これらのオプション (画像の置き換えと画像の削除) を各画像の上部に表示しました。そのオプションは、マウスが特定の画像の上にあるときにのみ表示されます。

マウスホバー時にオプションがゆっくり表示されるようにする方法

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>
4

1 に答える 1

0

切り替えが必要な 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
}

デモ

于 2013-03-15T11:57:19.057 に答える