我有这个图像库，我想在没有javascript的情况下完成它。这可以在不使用javascript的情况下完成吗？？只需要在鼠标悬停或类似情况下更改大图即可。
function myFunction(imgs) {
var expandImg = document.getElementById('expandedImg')
var imgText = document.getElementById('imgtext')
expandImg.src = imgs.src
imgText.innerHTML = imgs.alt
expandImg.parentElement.style.display = 'block'
}* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: '';
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}<div style="text-align: center">
<h2>Tabbed Image Gallery</h2>
<p>Click on the images below:</p>
</div>
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="img_nature.jpg" alt="Nature" style="width: 100%" onclick="myFunction(this);" />
</div>
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width: 100%" onclick="myFunction(this);" />
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width: 100%" onclick="myFunction(this);" />
</div>
<div class="column">
<img src="img_lights.jpg" alt="Lights" style="width: 100%" onclick="myFunction(this);" />
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span
>
<img id="expandedImg" style="width: 100%" />
<div id="imgtext"></div>
</div>感谢您的帮助。很抱歉添加此文本，因为StackOverflow不允许我在不添加更多文本的情况下发布此文本。
提前谢谢。
前言
虽然不是不可能，但我强烈建议使用JavaScript而不是CSS来完成这项任务。你不应该把这个答案的以下内容看作是JavaScript预期目的的替代品，而是把它看作是一个有趣的"游戏"；解决方案"；。
使用JavaScript而不是CSS的另一个要点是：使用CSS执行此任务根本不可访问。你应该始终努力制作好的、易于使用的和可访问的网站。
出于上述原因，您应该，尤其是避免在商业环境中使用此功能。
仅CSS解决方案
必要的HTML更改
由于CSS是级联，因此图像预览需要位于大图像本身或其祖先之前。你可以这样想象：HTML是一棵树，效果只传递到叶子，但不能影响相邻的分支，因为这需要在某个时候回溯。
在代码中，这可能看起来像这样：
<!-- Either this (case 1): -->
<img class="img-preview">
<img class="big-img">
<!-- Or this (case 2): -->
<img class="img-preview">
<div>
<img class="big-img"> <!-- May be nested deeper -->
</div>
CSS
CSS应该相对简单。唯一的问题是，对于每个图像预览，都需要添加一个新的CSS规则。这使得添加新的图像预览在未来会有更多的工作，但更重要的是：它会让你的CSS充满不必要的规则！这可能会导致未使用的CSS规则，以防您重写一些规则，并严重阻碍维护和可读性。
友情提醒：这应该更好地使用JavaScript
CSS的:hover-伪类实际上与JS的mouseover相同。使用这个和一般的兄弟组合子~(以及可能的子组合子)，我们可以根据悬停的图像预览来覆盖大图像的background-image-属性：
/* Either this (case 1): */
.img-preview:hover~.big-img {/* ... */}
/* Or this (case 2): */
.img-preview:hover~* .big-img {/* ... */}
正如我已经提到的，每个图像预览都需要自己的CSS规则。这是因为CSS不能使用HTML属性作为其属性(我认为除了伪元素和它们的content-属性)。
这意味着，当前HTML:的CSS可能是这样的
/* The CSS */
.img-preview[data-src="https://picsum.photos/id/10/64/64"]:hover~.big-img {
background-image: url("https://picsum.photos/id/10/64/64");
}
.img-preview[data-src="https://picsum.photos/id/1002/64/64"]:hover~.big-img {
background-image: url("https://picsum.photos/id/1002/64/64");
}
/* etc. */
/* Ignore; for styling only */
img {border: 1px solid black}
.img-preview {
width: 2rem;
height: 2rem;
}
.big-img {
width: 4rem;
height: 4rem;
}<img class="img-preview"
src="https://picsum.photos/id/10/32/32"
data-src="https://picsum.photos/id/10/64/64">
<img class="img-preview"
src="https://picsum.photos/id/1002/32/32"
data-src="https://picsum.photos/id/1002/64/64">
<!-- etc. -->
<img class="big-img">(旁注：我在这里使用了属性选择器，但同样的事情也可以使用ID或类似的东西来完成，只要每个图像预览都可以单独选择。)
尾注
在悬停时添加文本描述可以用类似的方式解决，但这是一项任务。
不幸的是，使用这种方法时不会留下大图像。如果你想让它继续存在，你应该看看Abd Elbeltaji的回答。他们使用<input>-和<label>-标记，以及CSS的:checked-伪类来实现这一点。
尽管如此，如图所示更改HTML并不会限制您对元素的样式设置，尤其是在使用FlexBox或CSS Grid时。它们不仅使造型更容易，还旨在使网站更容易响应。
可访问性
再次：这不是一个可访问的解决方案！这整个任务当然应该由JavaScript来处理。
如果这是一个公共网站，那么我建议为每个图片添加alt描述，甚至预览。不幸的是，通过CSS更新大图像的alt-属性是不可能的，这使得它无法访问，这反过来又会损害你的SEO。话虽如此，我赞扬您在原始代码中显示图像的alt-属性方面所做的努力，尽管这并不完美。您可能想看看<figure>。
当我们在做的时候：我还建议学习一些语义HTML标签，以达到可访问性的目的。
伪元素(::after、::before等)也不可访问。您不应使用它们来包含任何相关信息/文本。尽管它们可以以各种可以想象的方式用于造型目的。
是的，您可以在不使用javascript的情况下实现相同的行为，您可以使用输入元素的概念(单个切换值的复选框，多个选择值的单选框)作为元素的相邻同级，它们应该受到输入的影响，并通过在css中使用:checked伪选择器进行输入，在与相邻同级选择器~的比较中，您可以在检查输入时影响所需的元素。您还可以使用labels，这将允许您隐藏输入并使用标签中的任何内容触发其值。
// No JS!* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
}
/* Expanding image text */
#imgtext::after {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
.container .img {
height: 500px;
width: 100%;
background-image: url(https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size: cover;
}
/* Tab select */
input[name=tabSelect],
#hideImage {
display: none;
}
#tabSelect1:checked~div.container .img {
background-image: url(https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}
#tabSelect2:checked~div.container .img {
background-image: url(https://images.pexels.com/photos/869258/pexels-photo-869258.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}
#tabSelect3:checked~div.container .img {
background-image: url(https://images.pexels.com/photos/1183021/pexels-photo-1183021.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}
#tabSelect4:checked~div.container .img {
background-image: url(https://images.pexels.com/photos/1124960/pexels-photo-1124960.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
}
#tabSelect1:checked~div.container #imgtext::after {
content: "Nature";
}
#tabSelect2:checked~div.container #imgtext::after {
content: "Snow";
}
#tabSelect3:checked~div.container #imgtext::after {
content: "Mountains";
}
#tabSelect4:checked~div.container #imgtext::after {
content: "Lights";
}
/* image hide btn */
#hideImage:checked~div.container {
display: none;
}<div style="text-align:center">
<h2>Tabbed Image Gallery</h2>
<p>Click on the images below:</p>
</div>
<input type="radio" name="tabSelect" id="tabSelect1">
<input type="radio" name="tabSelect" id="tabSelect2">
<input type="radio" name="tabSelect" id="tabSelect3">
<input type="radio" name="tabSelect" id="tabSelect4">
<!-- The four columns -->
<div class="row">
<div class="column">
<label for="tabSelect1">
<img src="https://images.pexels.com/photos/15286/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Nature" style="width:100%">
</label>
</div>
<div class="column">
<label for="tabSelect2">
<img src="https://images.pexels.com/photos/869258/pexels-photo-869258.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Snow" style="width:100%">
</label>
</div>
<div class="column">
<label for="tabSelect3">
<img src="https://images.pexels.com/photos/1183021/pexels-photo-1183021.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Mountains" style="width:100%">
</label>
</div>
<div class="column">
<label for="tabSelect4">
<img src="https://images.pexels.com/photos/1124960/pexels-photo-1124960.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Lights" style="width:100%">
</label>
</div>
</div>
<input type="checkbox" id="hideImage">
<div class="container">
<label for="hideImage" class="closebtn">×</label>
<div class="img"></div>
<div id="imgtext"></div>
</div>注意这种方法不是最优的，并且在需要添加更多值的情况下很难扩展。
PS:我不得不更改图像，因为您的代码中提供的图像不存在。