아이템을 클릭하여 img src 변경 CSS

Question

나는 이미지와 메인 이미지가 있습니다. 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를 사용해야합니다. 당신이

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

이 라인을 따라 뭔가를보십시오 (안된) jQuery를 사용하는 경우

...