Ändern Sie img src durch Klicken auf li Element CSS

Question

Ich habe eine ul Bilder und ein Hauptbild. Ist es möglich, die src des Hauptbildes zu ändern, indem man auf eine der ul nur durch CSS klickt?

Answer 1

Ich habe einen ul von Bildern und eines Hauptbildes. Ist es möglich, die src des Hauptbildes zu ändern, indem Sie auf eine der ul einfach durch CSS klicken?

Es ist möglich etwas zu erreichen nähern, was Sie beschreiben nur mit CSS.

Sie können den Vorteil nutzen, dass Elemente mit dem Attribut tabindex den Fokus haben können. Dann können Sie die Pseudo-Klasse :focus in Ihren Stilregeln verwenden.

Allerdings ... es versteht sich von selbst: Sobald Sie den Fokus von dem Element entfernen, das ihn enthält, hat die Stilregel, die :focus aufruft, keine Wirkung mehr.

Arbeitsbeispiel:

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

Meiner Meinung nach, müssen Sie JavaScript dafür verwenden.

Falls Sie sich mit jQuery (ungetestet)

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

Versuchen Sie etwas in dieser Richtung ...