jquery - 更改事件缩略图 Ninja Slider 的样式

Question

出于某种原因，我无法在 div 的 span 中定位/选择图像并在单击或激活时更改它并关闭其余部分。

所以换句话说，图像上有一个跨度，当我滑过或点击它时它应该改变样式，为什么你不改变样式兄弟？

这是我需要发生的事情的一个例子: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>

这是我的 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-->

对于悬停，我使用的是 css，效果很好:

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

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

但我需要图像在单击时保持“事件”状态，休息时不处于事件状态。

/<<<<<------这是原来的样式我要加上这个------>/

 div#thumbs img.thumb-img {
  opacity:1;
  border:6px solid #666666;

  } 

请帮忙，我有麻烦了。我是小白

Answer 1

将此代码添加到您的 css

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