Question

我不确定如何处理这个问题。我之前试图做过这样的事情，但根本没有成功，所以我想我先跳到这里寻求聪明人的智慧。

基本上我的页面上有一系列80x80缩略图，我想要一个拇指右下角的小加号按钮（有一个悬停所以你可以看到它＆sa; sa按钮）执行Javascript函数。基本上，加号按钮会将缩略图添加到页面的另一个区域。

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

基本上我只是在寻找一个起点，我在Google上尝试了一些例子，我无法正常工作，而且这些都没有真正适应我的目标。试图做。不幸的是，CSS不是我的强项之一。

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

Answer 1

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

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

希望这会有所帮助：）

缩略图上的CSS按钮

1 个答案: