jQuery添加和刪除'活動'類加懸停

我有一個縮略圖定義列表。他們是50％不透明與'拇指'類。當徘徊100％不透明度。當點擊100％不透明度加上改變'拇指'到'縮略圖'類jQuery添加和刪除'活動'類加懸停

到目前爲止，我的蹩腳代碼的作品，唯一的事情是我無法獲得點擊100％的噸。

 
dl { 
    width: 700px; 
} 
dt { 
    clear: left; 
    float: right; 
    width: 400px; 
    height:80px; 
    margin: 0 0 10px 0; 
    background:orange; 
} 
dd.thumb, dd.thumbActive { 
    clear: none; 
    float: left; 
    margin: 0 0 10px 0; 
    background:black; 
} 
dd { 
    clear: right; 
}

 
    jQuery.noConflict(); 

    jQuery(document).ready(function() { 

     /* just for debugging */ 
     function showClassNames() { 
       jQuery("dt").each(function() { 
        var className = jQuery(this).next().attr('class'); 
        jQuery(this).text(className); 
       }); 
     }; 
     showClassNames(); 

     /* resets all thumbs (50% alpha, .thumb classname) */ 
     function resetThumbs() { 
       jQuery("dd").each(function() { 
       jQuery(this).removeClass("thumbActive"); 
       jQuery(this).addClass("thumb"); 
       jQuery("dd img").css('opacity', 0.5); 
      }); 
     }; 

     // half opacity for all thumbs except the first one (active) 
     jQuery("dd:not(.thumbActive) img").css('opacity', 0.5); 
     jQuery("dd img").hover(
      function() { jQuery(this).css('opacity', 1.0); }, 
      function() { jQuery(this).css('opacity', 0.5); } 
     ); 

     jQuery("a.thumbClick").click(function() { 
      resetThumbs(); 
      jQuery(this).parent().removeClass("thumb"); 
      jQuery(this).parent().addClass("thumbActive"); 
      jQuery(this).css('opacity', 1.0); 
      showClassNames();   
      return false; 
     }); 

    }); // end document ready

<div id="album-canvas-left" style="width:930px; " >   
<dl id="thumb-list" > 
    <dt></dt> 
    <dd class="thumbActive"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/001.jpg" width="120" height="80" alt="living room" title="living room" /></a></dd> 
    <dd></dd> 
    <dt></dt> 
    <dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/002.jpg" width="120" height="80" alt="bedroom" title="bedroom" /></a></dd> 
    <dd></dd> 
    <dt></dt> 
    <dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/003.jpg" width="120" height="80" alt="kitchen" title="kitchen" /></a></dd> 
    <dd></dd> 
</dl>

來源

2009-12-26 FFish

我只是將你的不透明度設置移動到CSS，只是在jQuery中添加/刪除類。事實上，如果你不是針對IE6的，你可以在CSS中使用:hover來處理不透明。

與IE6的支持

dd img{ 
    opacity: 0.5; 
    -moz-opacity: 0.5; 
    filter:alpha(opacity=50); 
} 

dd.hover img, dd.thumbActive img { 
    opacity: 1.0; 
    -moz-opacity: 1.0; 
    filter:alpha(opacity=100); 
}

然後改變你的hover這樣：

jQuery("dd").hover(
    function() { jQuery(this).addClass('hover'); }, 
    function() { jQuery(this).removeClass('hover'); } 
);

WITHOUT IE6的支持

dd img{ 
    opacity: 0.5; 
    -moz-opacity: 0.5; 
    filter:alpha(opacity=50); 
} 

dd:hover img, dd.thumbActive img{ 
    opacity: 1.0; 
    -moz-opacity: 1.0; 
    filter:alpha(opacity=100); 
}

而只是刪除您完全調用。

來源

2009-12-26 18:06:02

當您單擊鼠標，然後關閉懸停輸出功能仍然被稱爲該設置不透明度回爲0.5

你應該懸停出函數（懸停函數的第二個參數）檢查並確保對象的類未設置爲thumbActive。

來源

2009-12-26 17:22:10

感謝冰山傑夫！ – FFish 2009-12-26 23:22:39

多虧了這兩個，我想出了這個：

 
dd img { 
    opacity: 0.5; 
    -moz-opacity: 0.5; 
    filter:alpha(opacity=50); 
} 
/* IE6 does not support :hover */ 
dd.hover img { 
    opacity: 1.0; 
    -moz-opacity: 1.0; 
    filter:alpha(opacity=100); 
}

 
jQuery("dd").hover(
    function() { 
     jQuery(this).addClass('hover'); 
     showClassNames(); 
    }, 
    function() { 
     if (!jQuery(this).hasClass('active')) jQuery(this).removeClass('hover'); 
    } 
); 

jQuery("a.thumbClick").click(function() { 
    jQuery("dd").removeClass("hover active"); 
    jQuery(this).parent().addClass("hover active");  
    return false; 
});

<dl id="thumb-list" > 
    <dt></dt> 
    <dd class="thumb hover active"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/001.jpg" width="120" height="80" alt="living room" title="living room" /></a></dd> 
    <dd></dd> 
    <dt></dt> 
    <dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/002.jpg" width="120" height="80" alt="bedroom" title="bedroom" /></a></dd> 
    <dd></dd> 
    <dt></dt> 
    <dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/003.jpg" width="120" height="80" alt="kitchen" title="kitchen" /></a></dd> 
    <dd></dd> 
</dl>

來源

2009-12-26 23:25:41 FFish

jQuery添加和刪除'活動'類加懸停

回答

相關問題