懸停不透明度的jQuery

我已經嘗試過，但未能得到此工作。基本上我試圖得到它，所以當你把鼠標懸停在一個div上時，它應該將兄弟姐妹的不透明度改變爲具有class="receiver"的0.5。懸停不透明度的jQuery

如果看到此jsFiddle，有2周的div class="outerwrapper"，都含有2周的div類hover和receiver。當您將鼠標懸停在類hover的div上時，receiver的不透明度應該設置爲0.5，但只有同一個div（外層包裝）內的一個。

任何幫助將不勝感激。提前致謝。

來源

2012-03-23 jacktheripper

你不需要使用jQuery或JavaScript，這（雖然你可以），CSS是在實現相同的最終結果的大多數瀏覽器相當的能力：

.hover:hover + .receiver { 
    opacity: 0.5; 
}

JS Fiddle demo。

而且還，即使「僅僅」 CSS，現代/兼容的瀏覽器，它可以使用淡入淡出的過渡（或者，嚴格地說，過渡不透明度）：

.receiver { 
    width: 50px; 
    height: 50px; 
    background-color: blue; 
    opacity: 1; 
    -webkit-transition: opacity 1s linear; 
    -o-transition: opacity 1s linear; 
    -ms-transition: opacity 1s linear; 
    -moz-transition: opacity 1s linear; 
    transition: opacity 1s linear; 
} 

.hover:hover + .receiver { 
    opacity: 0.5; 
    -webkit-transition: opacity 1s linear; 
    -o-transition: opacity 1s linear; 
    -ms-transition: opacity 1s linear; 
    -moz-transition: opacity 1s linear; 
    transition: opacity 1s linear; 
}

JS Fiddle demo。

我會提供一個JavaScript/jQuery的解決方案，以及，但有幾個人已經發布，現在，在我自己的（它只是感覺我寧願不重複別人的答案喜歡抄襲/複製）。

來源

2012-03-23 23:03:22

隨着一些不錯的CSS轉換是魔術！謝謝！ – jacktheripper 2012-03-23 23:10:38

噢，我剛剛添加這些，因爲你評論！=）和喲非常歡迎，我很高興得到了幫助！ = D – 2012-03-23 23:13:45

+1的CSS解決方案！ – 2012-03-23 23:18:53

像這樣的事情會做到這一點：http://jsfiddle.net/UzxPJ/3/

$(function(){ 
    $(".hover").hover(
     function(){ 
      $(this).siblings(".receiver").css("opacity", 0.5);  
     }, 
     function(){ 
      $(this).siblings(".receiver").css("opacity", 1); 
     }   
    );    
});

參考

.siblings() - 獲取元素的兄弟姐妹 - http://api.jquery.com/siblings/

.hover() - 趕上鼠標懸停/鼠標移開事件 - http://api.jquery.com/hover/

來源

2012-03-23 23:01:54

大答案+1，alltho我會建議使用」 .fadeTo（0,0.5）;代替的.css（）編輯：哦和緩存$（本）。，並使用.on（'懸停'，功能），而不是.hover :) – ninja 2012-03-23 23:05:14

@ninja你不能緩存'$（this）'在這裏 - 他們是兩個單獨的回調。 – Alnitak 2012-03-23 23:07:36

@ninja同意，有幾種方法以達到同樣的目的，我認爲這是最具描述性的，但。 – 2012-03-23 23:09:35

$('.hover').hover(function() { 
    $(this).next('.receiver').css('opacity', 0.5); 
}, function() { 
    $(this).next('.receiver').css('opacity', 1.0); 
});

http://jsfiddle.net/2K8B2/

（使用.siblings或.nextAll如果.receiver不一定是下一個元素）

來源

2012-03-23 23:02:11 Alnitak

這工作：

$(document).ready(function() { 
    $('.hover').hover(function() { 
     var $parent = $(this).parent('.outerwrapper'); 
     $parent.find('.receiver').css({ opacity : 0.5 }); 
    }, function() { 
     var $parent = $(this).parent('.outerwrapper'); 
     $parent.find('.receiver').css({ opacity : 1 }); 
    }); 
});

來源

2012-03-23 23:05:13

...但不必要的複雜。遍歷兄弟在DOM中非常高效 - 不需要上升到父節點。 – Alnitak 2012-03-23 23:08:50

雅這是錯誤的解決方案。我已經投了.siblings（）一個更好的解決方案。 – 2012-03-23 23:23:52

懸停不透明度的jQuery

回答

相關問題