Ändern der Art des aktiven Miniaturbildes Ninja Slider

Question

Aus irgendeinem Grund kann ich nicht Ziel/Wählen Sie Bild in span in Div und ändern Sie es, wenn geklickt oder aktiv und schalten Sie den Rest aus.

Also mit anderen Worten gibt es eine Spanne über das Bild, wenn ich Rollover oder klicken Sie darauf sollte es Stile ändern, warum ändern Sie nicht Stil bro? Hier

ist ein Beispiel für genau das, was ich brauche, um zu passieren: http://www.menucool.com/slider/jquery-slideshow

<script> 
$(document).ready(function() { 
$('.light>img') 
    .mouseover(function(event) { 
    $(event.target).addClass('thumb-img'); 
    }) 
    .mouseout(function(event) { 
    $(event.target).removeClass('thumb-img'); 
    }) 
    .click(function(event) { 
    $(event.target).toggleClass('thumb-img'); 



    }); 
    }); 

    </script> 

Hier ist mein html:

<!--start--> 
<div id="ninja-slider"> 
    <div class="slider-inner"> 
     <ul> 
      <li><!--Video one--> 
       <div class="video"> 
        <iframe src="https://www.youtube.com/embed/8EO7byfYfAQ?enablejsapi=1&start=0&rel=0&showinfo=0&iv_load_policy=3&modestbranding=1" frameborder="0" allowfullscreen></iframe> 
       </div> 

      </li> 
      <li><!--Video two--> 
       <div class="video"> 
        <iframe src="https://www.youtube.com/embed/e_CQv0zoDM8?enablejsapi=1&start=0&rel=0&showinfo=0&iv_load_policy=3&modestbranding=1" wmode="Opaque" frameborder="0" allowfullscreen></iframe> 
       </div> 

      </li> 
      <li><!--Video three--> 
       <div class="video"> 
        <iframe src="https://www.youtube.com/embed/crkig25K7NQ?enablejsapi=1&start=0&rel=0&showinfo=0&iv_load_policy=3&modestbranding=1" frameborder="0" allowfullscreen></iframe> 
       </div> 
       </li> 
       <li><!--Video four--> 
       <div class="video"> 
        <iframe src="https://www.youtube.com/embed/T5voTNy8fpg?enablejsapi=1&start=0&rel=0&showinfo=0&iv_load_policy=3&modestbranding=1" frameborder="0" allowfullscreen></iframe> 
       </div> 
       <a class="ns-img" href="http://176.32.230.2/darynhigginson.com/r-week-slider/img/4.jpg"></a> 
       <div class="video-playbutton-layer"></div> 
       </li> 
       <li><!--Video five--> 
       <div class="video"> 
        <iframe src="https://www.youtube.com/embed/efftckypcXk?enablejsapi=1&start=0&rel=0&showinfo=0&iv_load_policy=3&modestbranding=1" frameborder="0" allowfullscreen></iframe> 
       </div> 
       <a class="ns-img" href="http://176.32.230.2/darynhigginson.com/r-week-slider/img/5.jpg"></a> 
       <div class="video-playbutton-layer"></div> 
       </li> 

      <!-- <li> 
       <div class="video"> 
        <video controls data-autoplay="false"> 
         <source src="img/mcvideo.mp4" type="video/mp4" /> 
        </video> 
       </div> 
       <a class="ns-img" href="img/3.jpg"></a> 
       <div class="video-playbutton-layer"></div> 
      </li>--> 

     </ul> 
    </div> 
    <div id="thumbs"> 
     <span class="light" onclick="nslider.playVideo(0)"><img src="http://176.32.230.2/darynhigginson.com/r-week-slider/img/1.jpg" /><span class="playvideo"></span> <div class="thumb-description"><!--<h4>Lorem ipsum dolor sit amet</h4><p>consectetur adipiscing elit.</p>--></div></span> 
     <span class="light" onclick="nslider.playVideo(1)"><img src="http://176.32.230.2/darynhigginson.com/r-week-slider/img/2.jpg" /><span class="playvideo"></span> <div class="thumb-description"><!--<h4>Lorem ipsum dolor sit amet</h4><p>consectetur adipiscing elit.</p>--></div></span> 
     <span class="light" onclick="nslider.playVideo(2)"><img src="http://176.32.230.2/darynhigginson.com/r-week-slider/img/3.jpg" /><span class="playvideo"></span> <div class="thumb-description"><!--<h4>Lorem ipsum dolor sit amet</h4><p>consectetur adipiscing elit.</p>--></div></span> 

      <span class="light" onclick="nslider.playVideo(3)"><img src="http://176.32.230.2/darynhigginson.com/r-week-slider/img/4.jpg" /><span class="playvideo"></span> <div class="thumb-description"><!--<h4>Lorem ipsum dolor sit amet</h4><p>consectetur adipiscing elit.</p>--></div></span> 
      <span class="light" onclick="nslider.playVideo(4)"><img src="http://176.32.230.2/darynhigginson.com/r-week-slider/img/5.jpg" /><span class="playvideo"></span> 
      <div class="thumb-description"><!--<h4>Lorem ipsum dolor sit amet</h4><p>consectetur adipiscing elit.</p>--></div> 
      </span> 

    </div> 
</div> 
<!--end--> 

Für die Hover ich css bin mit der gut arbeitet:

div#thumbs > span img { 
    opacity:0.8; 
    } 

    div#thumbs > span:hover img{ 
    opacity:1; 
    } 

Aber ich brauche das Bild zu bleiben "AKTIV" wenn geklickt und Ruhe, um nicht aktiv zu sein.

/< < < < < ------ Dies ist der ursprüngliche Stil möchte ich hinzufügen ------>/

Pleeeeease Hilfe, ich bin in Ärger. Ich bin ein noob

Answer 1

diesen Code css

#thumbnail-slider ul li{ 
    opacity:1; 
}