jQueryでマウスオーバーの際に透明度の変更をしてみました。
jQueryは、Google Hosted Libraries の バージョン1.11.1 を使用。★バージョン2.1.1でも動作確認。
スクリプトとサンプル
$(function(){
$("#news").children().hover(
function(){
$(this).siblings().stop().fadeTo(300,0.3);
},
function(){
$(this).siblings().stop().fadeTo(300,1);
});
});
スクリプトの処理内容
$(function(){
/* #news ul の子要素がhover した時の処理 */
$("#news").children().hover(
function(){
/* 選択した要素の兄弟要素の透明度を300ミリ秒後に0.3に */
$(this).siblings().stop().fadeTo(300,0.3);
},
/* function 以降は マウスが要素から外れた時の処理 */
function(){
/* 選択した要素の兄弟要素の透明度を300ミリ秒後に1に */
$(this).siblings().stop().fadeTo(300,1);
});
});