Question

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

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

以下是我需要发生的事情的一个例子：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;
    }

但是我需要将图像保留为“＃34; ACTIVE＆＃34;点击并休息时不活动。

/ ＆lt;＆lt;＆lt;＆lt;＆lt; ------这是我要添加的原始样式------＆gt; /

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

  }

Pleeeeease帮助，我遇到了麻烦。我是菜鸟

Answer 1

将此代码添加到css

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

更改活动缩略图图像Ninja Slider

1 个答案: