アクティブなサムネイルを強調表示する方法は？

Question

私はこのページのアクティブなサムネイルをどのように強調表示できるのだろうかhttp://www.doublezerofilms.com/doublezero-template-webSamples.htmlそれをクリックすると、別のサムネイルがクリックされるまでmouseover imgにとどまりますか？

これは私がビデオを選択するために使用しているコードであり、その下にhtmlのおかげです！

$(document).ready(function() { 
    $("#Thumb1").click(function() { 
     $("#hidden").hide().html('<iframe src="http://player.vimeo.com/video/38366163?autoplay=1" width="508" height="286" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>').fadeIn(4e3); 
     $("#leftsidePlayer").text("This is some text on the consulting video!") 
    }); 

<div class="thumbsWrap"> 
         <div> 
          <div id="Thumb1" class="fadehover"> 
          <img src="images/thumb1.jpg" alt="" class="a" /> 
          <img src="images/thumb1-over.jpg" alt="" class="b" /> 
          </div> 

          <div id="Thumb2" class="fadehover"> 
          <img src="images/thumb2.jpg" alt="" class="a" /> 
          <img src="images/thumb2-over.jpg" alt="" class="b" /> 
          </div> 

          <div id="Thumb3" class="fadehover"> 
          <img src="images/thumb3.jpg" alt="" class="a" /> 
          <img src="images/thumb3-over.jpg" alt="" class="b" /> 
          </div> 

          <div id="Thumb4" class="fadehover" style="margin:0px"> 
          <img src="images/thumb4.jpg" alt="" class="a" /> 
          <img src="images/thumb4-over.jpg" alt="" class="b" /> 
          </div> 
         </div> 
        </div> 

ホバーコード

$(document).ready(function() { 
    $("img.a").hover(function() { 
     $(this).stop().animate({ 
      opacity: "0" 
     }, "fast") 
    }, function() { 
     $(this).stop().animate({ 
      opacity: "1" 
     }, "fast") 
    }) 
}); 

Answer 1

あなたは内外にそれらをフェージングを扱うコードを掲載しませんが、これは、あなたがどうなるのか、基本的です。

//when a div is clicked add an active class to it 
$('.thumbsWrap').on('click', '.fadehover', function() { 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 

//in hover event check if parent has the 'active class'. If so then don't fade it out. 
$("img.a").hover(function() { 
    $(this).stop().animate({ 
     opacity: "0" 
    }, "fast") 
}, function() { 
    if (!$(this).parent().hasClass('active')) { 
     $(this).stop().animate({ 
      opacity: "1" 
     }, "fast") 
    } 
}) 

Answer 2

私は、（ホバーの）サムネイルをハイライト表示するように不透明度を変更しているのがわかります。 http://jsfiddle.net/fnfJH/ divをクリックすると、divの不透明度が既に1から0.5に変更され、新たに1に変更されたdivの不透明度が変更されます。

Answer 3

イメージを隠すためにCSSを作成する必要があります例えば：

img.transparent { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    -moz-opacity: 0; 
    -khtml-opacity: 0; 
    opacity: 0; 
} 

は、今ではアクティブなイメージに

に影響を与えてはならない上今すぐあなたのマウスを編集ボタン

$("img.a").click(function() { 
$(this).addClass('transparent'); 
}); 

上のイベントをクリックします

$("img.a").hover(function() { 
if(!($(this).hasClass('transparent'))) { 
     $(this).stop().animate({ 
      opacity: "0" 
     }, "fast"); 
} 
    }, function() { 
if(!($(this).hasClass('transparent'))) { 
     $(this).stop().animate({ 
      opacity: "1" 
     }, "fast") 
} 
    })