如何突出顯示活動縮略圖？

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.

Answer 3

你確實需要創建一個CSS來隱藏你的圖像有類a例如：

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

現在按鈕添加click事件

$("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") 
} 
    })