使用jquery保持一個div的不透明度，減少懸停時的不透明度

我有點卡住了這個。這是我設置的基本輪廓：使用jquery保持一個div的不透明度，減少懸停時的不透明度

<div id="shell"> 
    <div class="subelement">One</div> 
    <div class="subelement">One</div> 
    <div class="subelement">One</div> 
    <div class="subelement">One</div> 
</div>

我期待，在.subelement的懸停，減少與子元素類，其餘的div的不透明度。我知道如何在jQuery中使用懸停效果，只是不知道從哪裏開始動畫製作剩餘的沒有懸停的div。感謝任何建議。

更新：最終解決方案 - http://jsfiddle.net/yqPFH/

來源

2013-01-01 Alex

因此，你是說如果用戶將鼠標懸停在一個div上，其餘的div將會褪色，但是其中一個不會徘徊？ – Sethen

@Alex當鼠標在兩個元素之間滾動時，您更新的解決方案會錯過:) –

@ Mr.Alien是正確的。這也懸停在懸停狀態。下面使用'animate'的Drew Baker提供的答案是不正確的。這不是'animate'用來做什麼的。 'fadeTo'顯然是最好的選擇。檢查我提交的答案，以便在懸停狀態之間平滑過渡。 – Sethen

儘管這個問題已經有了答案，一個額外的答案只要我調整和已被刪除。這裏使用的是jQuery，當沒有任何東西被徘徊時會丟失懸停狀態。簡單。

http://jsfiddle.net/kKHt4/3/

$(".subelement").hover(function() { 
    $(this).siblings().stop().fadeTo("fast", 0.5); 
}, function() { 
    $(this).siblings().stop().fadeTo("fast", 1.0); 
});

來源

2013-01-01 19:58:22 Sethen

小提琴有什麼問題：p –

@Mr。外星人謝謝！我提供了一個新的。現在工作。 – Sethen

完美........ –

$("#shell .subelement").hover(function() { 
    $(this).css("opacity", 1).siblings().css("opacity", 0.6); 
});

http://jsfiddle.net/EV833/1

來源

2013-01-01 19:31:52 Dogbert

我喜歡這個，你只傳遞一個函數來'懸停'而不是兩個，並利用方法鏈接。 – Sethen

工作完美無瑕。欣賞兄弟姐妹的用法（），希望能夠學到新的東西。謝謝！ – Alex

嘿dogbert只是確保物品沒有脫離不透明狀態，即使你沒有徘徊任何元素 –

我會一直使用CSS代替

Demo

Demo With Animations

HTML

<div id="shell"> 
    <div class="subelement">One</div> 
    <div class="subelement">One</div> 
    <div class="subelement">One</div> 
    <div class="subelement">One</div> 
</div>

CSS

#shell:hover { 
    color: rgba(0,0,0,.5); 
} 

.subelement:hover { 
    color: rgba(0,0,0,1); 
}

來源

2013-01-01 19:32:21

是的，這是做到這一點的正確方法。只有使用jQuery的理由是動畫。 – Sethen

@SethenMaleno等我給你一個動畫;） –

@SethenMaleno檢查了這一點，也編輯了我的答案http://jsfiddle.net/Yw8yD/1/ –

問題兩個部分：

1）你怎麼只保留第一行不透明度：1和休息.5 2）一旦選擇或徘徊，怎麼辦你保持不透明：1，直到你懸停/選擇另一條線？

來源

2016-06-02 00:02:42 Violin

使用jquery保持一個div的不透明度，減少懸停時的不透明度

回答

相關問題