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

Question

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

A列将有一堆图像图标

B列首先是空的（或者在加载页面时包含默认图像）

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

这是我可以用CSS做的吗？

有人可以告诉我该怎么做吗？也许是一个很好的教程或其他东西的链接？

谢谢！

Answer 1

css主要用于造型，所以我怀疑你能用css做到这一点。但我想有一些代码滥用你可以做出类似的东西。但如果我是你，我会用javascript来做。

Answer 2

我为了它的乐趣而制作了一个 jsFiddle ：http://jsfiddle.net/HB7LU/3277/

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

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

这条规则说：

• table#cssTable：适用于ID为＆＃34; cssTable＆＃34;
的表格
• tr td:first-child:hover：将第一个单元格悬停在一行
• + td img：选择相邻单元格中的图像。

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

$scope.showPicture = false;

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