HTML/CSS 在点击时将图像从一个框移动到另一个框。？

Question

我正在学习 HTML/CSS 。只是玩弄在网页上添加图片库。 我希望能够创建一个包含两列的表 A列和B列

A列会有一堆图片图标

B 列一开始是空的(或者在加载页面时包含默认图像)

当有人点击 A 列中的图像时，我希望该图像显示在 B 列中。

这是我可以用 CSS 做的事情吗？

谁能告诉我怎么做？也许是一个很好的教程或其他东西的链接？

谢谢!

Answer 1

我为了好玩做了一个jsFiddle:http://jsfiddle.net/HB7LU/3277/

使用 CSS，您无法对点击进行任何操作。但是当您将鼠标悬停在缩略图上时，您可以显示隐藏的图片，方法是通过一些 hacky 选择器:

table#cssTable tr td:first-child:hover + td img

这条规则说:

• table#cssTable:对于 id 为“cssTable”的表
• tr td:first-child:hover:当您悬停在一行中的第一个单元格时
• + td img:选择相邻单元格中的图像。

我还创建了一个用于单击图像的小型 AngularJS 应用程序。在这里，您通过指令 ng-show="showPicture" 隐藏显示图像，并使用 ng-click="togglePicture()" 切换。这是 Controller :

$scope.showPicture = false;

$scope.togglePicture = function () {
    $scope.showPicture = !$scope.showPicture;
};