jquery懸停淡出縮略圖

我想創建一些jquery樣式的懸停淡入/淡出縮略圖。我已經設法在圖像上進行懸停，但是這是一個問題。當用戶懸停時，我想要一些文字出現，這是我用CSS實現的，問題在於，當用戶將文字懸停在文字上時，圖像逐漸淡入。我想知道如何才能讓它繼續呈現圖像保持淡出狀態，同時也徘徊在文本上。我不希望文字變淡，我只是嘗試在腳本部分切換到拇指類。jquery懸停淡出縮略圖

<script> 
$(document).ready(function(){ 
    $(".thumb img").fadeTo("fast", 1.0); // This sets the opacity of the thumbs to fade down to 60% when the page loads 

    $(".thumb img").hover(function(){ 
     $(this).fadeTo("fast", 0.3); // This should set the opacity to 100% on hover 
    },function(){ 
     $(this).fadeTo("fast", 1.0); // This should set the opacity back to 60% on mouseout 
    }); 


}); 
</script>

HTML

<div class="thumb"> 
<a href="#"><img src="images/hooty_thumb.png" width="250" height="224"/></a> 
<div class="title"> 
<h1 class="din"><a href="#">TITLE HERE</a></h1> 
<h2><a href="#">Branding, Print, Web</a></h2> 
<h2><a href="#">2011</a></h2></div></div>

CSS：

.thumb {float: left; background-color: #FFF; z-index: 1; width: 250px; height: 225px; margin-right: 27px; margin-bottom: 45px; display: inline-block; *display:inline; *zoom: 1; position: relative;} 
.thumb .title{position:absolute; width: 250px; top: 40%; left:0%; text-align: center; display: none; z-index: -1;} 
.thumb:hover .title{display: inline; z-index: 1;} 
.thumb .title h1{color:#00F;}

來源

2011-11-13 Amy

在這裏你去，你需要去上一級，並附加側翻事件到父，然後遍歷DOM的形象和設置其不透明度。 *旁註$（文件）。就緒（函數（）{}）是一樣的$（函數（）{}）

$(function(){ 
    $(".thumb img").fadeTo("fast", 1.0); 

    $(".thumb").bind({ 
     mouseenter:function(){ 
      $('img', this).fadeTo("fast", 0.3); 
     },mouseleave: function(){ 
      $('img', this).fadeTo("fast", 1.0); 
     } 
    }); 
});

來源

2011-11-13 20:14:17 Marlin

謝謝謝謝你謝謝！ – Amy

您可以用HTML和CSS達致這只是，你的頁面會更有效率。

Html5的

<a href="#" class="thumb"> 
    <img src="images/hooty_thumb.png" width="250" height="224"/> 
    <strong>TITLE HERE</strong> 
    <em>Branding, Print, Web</em> 
    <time>2011</time> 
</a>

CSS

a.thumb{float:left; position:relative; background:#FFF; z-index:1; width:250px; height:225px; text-decoration:none; margin:0 27px 45px;} 
a.thumb img{opacity:0.6; -webkit-transition:opacity 0.2s linear; -moz-transition:opacity 0.2s linear;} 
a.thumb:hover img{opacity:1;} 
a.thumb>strong, .thumb>em, .thumb>time{opacity:0; -webkit-transition:opacity 0.2s linear; -moz-transition:opacity 0.2s linear;} 
a.thumb:hover>strong, .thumb:hover>em, .thumb:hover>time{opacity:1;}

來源

2011-11-13 20:12:54

唯一的問題是這是當我加我爲中心的代碼到中心中間的文本，所有的EM，強力等相互重疊，有沒有辦法解決這個問題的方法嗎？此外webkit只適用於Safari瀏覽器，Chrome瀏覽器不是嗎？ – Amy

在相同的HTML和CSS，我調整你綁定事件從thumb img到thumb以確保事件發生在整個圖像塊上。在事件回調中，我使用jQuery context selector來檢測img元素並對其執行淡入/淡出效果。

效果可以在這裏看到。 http://jsfiddle.net/yangchenyun/5pnQA/

$(document).ready(function() { 
    $(".thumb img").fadeTo("fast", 1.0); // This sets the opacity of the thumbs to fade down to 60% when the page loads 
    $(".thumb").hover(function() { 
     $('img', this).fadeTo("fast", 0.3); // This should set the opacity to 100% on hover 
    }, function() { 
     $('img', this).fadeTo("fast", 1.0); // This should set the opacity back to 60% on mouseout 
    }); 
});

來源

2011-11-13 20:14:18 steveyang

jquery懸停淡出縮略圖

回答

相關問題