通过单击li 项 CSS 更改 img src

Question

我有一个 ul 图像和一个主图像。是否可以仅通过 CSS 单击其中一个 ul 来更改主图像的 src？

Answer 1

我有一个 ul 图像和一个主图像。是否可以更改 通过单击其中一个 UL 仅通过 CSS 来获取主图像的 src？

仅使用 CSS 可以实现接近您所描述的内容。

您可以利用具有 tabindex 属性的元素可以获取焦点的事实。然后，您可以在样式规则中使用:focus伪类。

然而。。。不言而喻：一旦你从具有它的元素中删除焦点，调用:focus的样式规则将不再有任何影响。

工作示例：

div, div img {
display: inline-block;
width: 50px;
height: 50px;
margin: 0 0 2px;
padding: 0;
cursor: pointer;
}
.display-image {
position: relative;
margin-left: 12px;
vertical-align: top;
cursor: default;
}
.display-image img {
position: absolute;
width: 200px;
height: 200px;
opacity: 0;
cursor: default;
transition: opacity 1s ease-out;
}
div:nth-of-type(1):focus ~ .display-image img:nth-of-type(1),
div:nth-of-type(2):focus ~ .display-image img:nth-of-type(2),
div:nth-of-type(3):focus ~ .display-image img:nth-of-type(3),
div:nth-of-type(4):focus ~ .display-image img:nth-of-type(4),
div:nth-of-type(5):focus ~ .display-image img:nth-of-type(5) {
opacity: 1;
}

<h2>Click on any of the thumbnail images</h2>
<div tabindex="0"><img src="http://placekitten.com/205/205" /></div>
<div tabindex="0"><img src="http://placekitten.com/209/209/" /></div>
<div tabindex="0"><img src="http://placekitten.com/210/210/" /></div>
<div tabindex="0"><img src="http://placekitten.com/211/211/" /></div>
<div tabindex="0"><img src="http://placekitten.com/212/212/" /></div>
<div class="display-image">
<img src="http://placekitten.com/205/205" />
<img src="http://placekitten.com/209/209/" />
<img src="http://placekitten.com/210/210/" />
<img src="http://placekitten.com/211/211/" />
<img src="http://placekitten.com/212/212/" />
</div>

Answer 2

在我看来，你需要使用JavaScript

。

如果您使用的是jQuery(未经测试(

$(document).on('click', '.ul-li-element-image', function() {
    $('.mainImage').attr('src', $(this).attr('src'));
});

尝试一下这些思路...