Отображение предварительного просмотра изображения при наведении (только HTML)

Question

Хотя есть много способов сделать это с помощью CSS / JS, есть ли способ сделать это, просто используя HTML?

Причина, по которой я хочу это сделать, заключается в том, что это значительно упрощает копирование.

Answer 1

Я не думаю, что это возможно только с HTML.

Я хочу решить это:

Причина, по которой я этого хочу, заключается в том, что это значительно упрощает копирование.

Прежде всего, это не так.

Разделяя CSS и HTML, вы фактически копируете меньше каждый раз, когда хотите скопировать экземпляр чего-либо.

Например:

CSS:

 img{display:none;}
 a:hover + img {display:block; width:100px; height:100px; background:black;}

HTML:

 img{display:none;}
 a:hover + img {display:block; width:100px; height:100px; background:black;}

Демо

Теперь, если вам нужно другое изображение, просто скопируйте и вставьте HTML прямо рядом с ним.

Однако реальным преимуществом разделения контента и стиля является возможность редактировать один раз и изменить все.

Если бы на моем веб-сайте было пятьдесят изображений на трех страницах, и я хотел добавить к ним рамку, мне пришлось бы вручную заходить на каждую страницу и изменять каждый отдельный экземпляр.

С помощью CSS я могу изменить одну строку в одном файле, и все они обновляются.

Для этой конкретной проблемы, однако, я бы посмотрел на решение Javascript. В идеале предварительный просмотр изображений не будет загружаться, если они не будут вызваны, а это выходит за рамки CSS.

Answer 2

Это невозможно только с помощью HTML.Вам нужен хотя бы CSS или JavaScript, извините.Вы можете быть в состоянии приблизиться с CSS.