jQuery懸停淡出和更改類

我正在「最新項目」頁面上......項目顯示爲鏈接的照片裏面的一個li標籤..我想添加jquery，其中當某個人將它停留在淡出的照片時在更改背景色，並在中間查看小圖片...李代碼..jQuery懸停淡出和更改類

<li><a class="workslinks" href="#"><img src="img/home/l_work/1.png" alt="1" /><div style="z-index:1;" class="workhover"><div class="hoversymbol"></div></div></a></li>

CSS：

li{ 
    float:right; 
    list-style:none; 
} 
li a{ 
    display: block; 
    width: 215px; 
    height: 115px; 
    margin: 0 15px 15px 0; 
    padding: 4px; 
    background: #fff; 
    border: 1px #eee solid; 
    box-shadow:0px 0px 8px #f1f1f1; 
    -moz-box-shadow:0px 0px 8px #f1f1f1; 
    -webkit-box-shadow:0px 0px 8px #f1f1f1; 
} 
li a img{ 
    display:block; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition:all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    -transition: all 0.2s ease-in-out; 
} 
li a img:hover{ 
    background: #000; 
    opacity:1.0; 
} 
li a .workhover { 
    background:rgba(0,0,0,0.4) !important; 
    width: 215px; 
    height: 115px; 
    position: absolute; 
    top: 5px; 
    display: none; 
} 

li a .workhover .hoversymbol { 
    background:url(../img/home/l_work/links.png) center center no-repeat; 
    width:100%; 
    height:100%; 
}

的jQuery代碼我試圖代碼刪除類hidden財產分配workhover div當徘徊，但它沒有爲所有名單元素不是選擇的唯一:(

=================

只是我想，徘徊.workslinks當它改變的不透明度.workhover的價值代碼從0到1緩慢..所以它看起來像淡入，mmm是可能的嗎？沒有CSS轉換

來源

2013-09-22 user2217482

向我們展示你嘗試過的代碼。 – jfriend00

只是我想要一個代碼，當懸停'.workslinks'它將'.workhover'的不透明度的值從0緩慢地改變爲1 ..所以它看起來像在淡出,, mmm是可能的嗎？沒有CSS轉換 – user2217482

可以使用fadeIn() abnd fadeOut() methods in jQuery because the .workhover object is initially顯示：none`：

$(".workslinks").hover(function() { 
    $(this).find(".workhover").stop(true).fadeIn(1000, 1); 
}, function() { 
    $(this).find(".workhover").stop(true).fadeOut(1000, 0); 
});

來源

2013-09-22 17:02:48 jfriend00

所有我想要的是一個代碼，當懸停'.workslinks'它將'.workhover'的不透明度的值從0緩慢地改變爲1 ..所以它看起來像在淡出,, mmm是可能的？沒有CSS轉換... 您的代碼會褪色'.workslinks' it self .. @> @ – user2217482

@ user2217482 - 我修改了我的答案以更改'.workhover'對象的不透明度， .workslinks'正在用鼠標懸停。在你的問題中你根本不清楚你想要什麼。我建議你在你的問題中使用編輯按鈕來明確你想要的確切行爲。 – jfriend00

Thxxx ..但我怎麼可以最初使'。workhover'隱形..這就是爲什麼我reqwested代碼改變不透明度...不透明度將被設置爲0作爲默認，然後我想要一個代碼，改變不透明度'.workhover'從0到1，當有人懸停'.workslinks'時，速度很慢。 – user2217482

jQuery懸停淡出和更改類

回答

相關問題