Question

我有一个文本+图像并排，我想要一个功能，用户可以点击图像使其更大。我是HTML / CSS的新手，所以我想知道如何处理这个问题。谢谢！（演示 - ＆gt; 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视为定义内容的行为。

HTML / CSS：单击显示完整大小的图像

1 个答案: