HTML / CSS перемещает изображения из одного блока в другой по клику.

Question

HTML / CSS перемещает изображения из одного блока в другой по клику.

0

Я изучаю HTML/CSS. просто играя с добавлением галереи изображений на веб-странице. Я хочу, чтобы иметь возможность создать таблицу с двумя столбцами столбца А и столбца B

Столбец A будет содержать значки изображений

Столбец B сначала будет пустым (или будет содержать изображение по умолчанию при загрузке страницы)

Когда кто-то нажимает на изображение в столбце A, я хочу, чтобы это изображение отображалось в столбце B.

Это что-то я могу сделать с CSS?

Может ли кто-нибудь показать мне, как это сделать? может быть, ссылка на хороший учебник или что-то еще?

Благодарю!

psj01 27 апр. 2014, в 00:23

Источник

0

Вы не можете сделать это с помощью CSS, вы можете сделать это, бросив JavaScript. Вам нужно решение javascript / jquery?
Sharikov Vladislav 26 апр. 2014, в 21:57

Теги:

html

css

2 ответа

1

css в основном используется для стилизации, поэтому я сомневаюсь, что вы можете сделать это с помощью css. но я думаю, что с некоторым злоупотреблением кодом вы можете сделать что-то подобное. Но если бы я был вами, я бы сделал это с помощью javascript.

Mytherious 26 апр. 2014, в 20:35

0

Есть хороший учебник или что-то о том, как сделать это в JavaScript?
psj01 26 апр. 2014, в 22:06
0

stackoverflow.com/questions/2407096/… Это ответ на этом сайте, который использует jquery для этого, он охватывает все, что вам нужно.
Mytherious 26 апр. 2014, в 22:10

Ещё вопросы

Вы не можете сделать это с помощью CSS, вы можете сделать это, бросив JavaScript. Вам нужно решение javascript / jquery?
Есть хороший учебник или что-то о том, как сделать это в JavaScript?
stackoverflow.com/questions/2407096/… Это ответ на этом сайте, который использует jquery для этого, он охватывает все, что вам нужно.

Kjell Ivar · Accepted Answer · 2014-04-26T20-40-00.000Z

Я сделал jsFiddle просто для удовольствия: http://jsfiddle.net/HB7LU/3277/

С помощью CSS вы не можете ничего делать с помощью кликов. Но вы можете показать скрытую картинку, когда вы наводите миниатюру, используя немного взломанного селектора:

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

Это правило гласит:

table#cssTable: для таблицы с идентификатором "cssTable"
tr td:first-child:hover: когда вы наводите первую ячейку подряд
+ td img: выберите изображение в соседней ячейке.

Я также создал небольшое приложение AngularJS для щелчка изображения. Здесь вы скрываете отображение изображения с помощью директивы ng-show="showPicture" и переключаетесь с помощью ng-click="togglePicture()". Это контроллер:

$scope.showPicture = false;

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