0

我不太确定如何进行此操作。我以前尝试过做这种事情但完全没有成功，所以我想我会先跳到这里来寻求你们这些聪明人的智慧。

基本上，我的页面上平铺了一系列 80x80 的缩略图，我希望在拇指的右下角有一个小的加号按钮（它有一个悬停，所以你可以看到它是一个按钮），它执行 Javascript 功能。基本上加号按钮会将缩略图添加到页面的另一个区域。

无论如何，有人可以给我一个快速的例子来说明如何做到这一点吗？不仅按钮可单击，而且如果单击缩略图的正常图像部分，我希望它转到该缩略图。我已经让缩略图部分工作了，我只需要弄清楚如何覆盖按钮并使其成为实际缩略图的单独可点击元素。我为此制作了一个加号按钮图像和一个悬停加号按钮图像。

基本上我只是在寻找一个起点，我在谷歌上尝试了一些例子，但我什么都做不了，而且没有一个是真正适合我想要做的。不幸的是，CSS 不是我的强项之一。

感谢大家的帮助，非常感谢。

4

1 回答 1

2

如果我理解正确，试试这个...

.img_container {position: relative; width: 80px; height: 80px;}

.img_container button {display: none; position: absolute; bottom: 0; right: 0; width: 20px; height: 20px;}
.img_container:hover {background: rgba(0,0,0,.4);}
.img_container:hover button {display: inline-block;)

你的html

<div class="img_container">
    <img src="pic.png">
    <button>+</button>
</div>

希望这可以帮助 ：）

于 2012-05-20T08:33:25.113 回答