在任何图像上添加按钮onmouseover

Question

我有一个PHP“while循环”列表，它使用img标记显示图像。这非常有效。

现在，我想创建一个JavaScript函数，当用户使用鼠标悬停在任何图像上时，该函数将显示一个按钮。问题是，当鼠标“悬停”时，我想在图像上显示按钮。

见下面的例子：

我该怎么做？

Answer 1

您可以使用CSS：

CSS：

.container {
    width:380px;
    height:inherit;
    float:left;
}
.container div.item {
    width:100px;
    height:100px;
    background:#999;
    float:left;
    margin:10px;
    position: relative;
    border:1px red solid;
}
.container div.item a {
    background:#fff;
    position:absolute;
    width: 100%;
    bottom: 0;
    left:0;
    display:none;
    border:1px red solid;
}
.container div.item:hover a {
    display:block;
}

HTML：

<div class="container">
  <div class="item"><img src="smallimage.png" /><a id="img1" href="javascript:largerimg(this);">View Larger</a></div>
  <div class="item"><img src="smallimage.png" /><a id="img2" href="javascript:largerimg(this);">View Larger</a></div>
  <div class="item"><img src="smallimage.png" /><a id="img3" href="javascript:largerimg(this);">View Larger</a></div>
  <div class="item"><img src="smallimage.png" /><a id="img4" href="javascript:largerimg(this);">View Larger</a></div>
  <div class="item"><img src="smallimage.png" /><a id="img5" href="javascript:largerimg(this);">View Larger</a></div>
</div>

Answer 2

如何使用jquery添加css动画来显示按钮。

请参阅此小提琴http://jsfiddle.net/sajith/xGFTB/

$(document).ready(function () {
    $("div img").on('mouseover', function () {
        $("span").animate({
            'top': 0
        });
    });
    $("div img").on('mouseout', function () {
        $("span").animate({
            'top': 50
        });
    });
});