Question

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

Answer 1

我有一张图片和一张主图片。是否有可能改变单击一个ul的主要图像的src？

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

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

然而......不言而喻：一旦你从拥有它的元素中移除焦点，调用:focus的样式规则将不再有任何效果。

工作示例：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

在我看来，你需要使用JavaScript。

如果您使用的是jQuery（UNTESTED）

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

沿着这些方向尝试一些事情......

单击li item CSS更改img src

2 个答案: