通过点击li项来更改img src CSS

Question

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

Answer 1

我有图像的UL和主图像。是否可以通过单击CSS中的某个ul来更改主图像的 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')); 
}); 

尝试沿着这些路线的东西...