HTML/CSS : Show full size image on click

Question

我有一个并排的文本 + 图像，我想要一个用户可以点击图像使其变大的功能。我是 HTML/CSS 的新手，所以我想知道如何解决这个问题。谢谢! (演示 -> https://jsfiddle.net/DTcHh/6634/)

有什么方法可以使用纯 HTML/CSS 而不使用 javascript 来做到这一点吗？

我发现的那些告诉我使用 javascript，例如:

 <script type="text/javascript">
        function showImage(imgName) {
            document.getElementById('largeImg').src = imgName;
            showLargeImagePanel();
            unselectAll();
        }
        function showLargeImagePanel() {
            document.getElementById('largeImgPanel').style.visibility = 'visible';
        }
        function unselectAll() {
            if(document.selection) document.selection.empty();
            if(window.getSelection) window.getSelection().removeAllRanges();
        }
        function hideMe(obj) {
            obj.style.visibility = 'hidden';
        }
        </script>

在 HTML/CSS 中有更简单的方法吗？

Answer 1

您可以使用 CSS 伪类来更改样式，例如，当鼠标悬停在图像上时:

img:hover {
  width: 300px;
  height: 300px;
}

不过，一般来说，要为您的网页添加交互性，您必须熟悉 JavaScript。我不知道有什么方法可以在不使用 JavaScript 的情况下切换状态(例如“放大”)。

您可以将 HTML 视为定义内容，将 CSS 视为定义内容的外观，将 JavaScript 视为定义内容的行为方式。