javascript - 残りのページ全体を照らすメニュー ホバー効果

Question

次のウェブサイトのようなメニュー ホバー効果を作成する方法を教えてください。

https://www.bankalhabib.com/

<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Num</li>
</ul>

Answer 1

addClass()次の CSSを使用することをお勧めします。

$('li').hover(function(){
    $(this).addClass('hovered');
},function(){
    $(this).removeClass('hovered');
});

これには、不透明度のスタイルを設定する CSS ルールを追加する必要があります。

ul:hover li {
    opacity: 0.4;
}

ul li.hovered {
    opacity: 1;
}

JS フィドルのデモ。

ちなみに、自分の質問を解決するために費やした努力を示すことができれば、それほど多くの反対票は得られないかもしれません. 現在書かれているような質問ではなく、実際に要求として読んでください。

もちろん、単純な CSS を使用することもできます。

ul:hover li {
    opacity: 0.4;
}

ul li:hover {
    opacity: 1;
}

JS フィドルのデモ。

Answer 2

オーバーレイ効果

関心のあるサイト ( https://www.bankalhabib.com/ ) で、ナビゲーション リンク (「ホーム」など) にマウスを合わせると、ページが薄暗くなります。

この効果は、次の要素の結果です。

<span class="overlay" style="height: 2464px; display: none;"></span>

これはデフォルトで非表示 ( display: none) になっています。

この要素は、次の jQuery アクション (js/custom_js.js にあります) によって表示されます。

/*Over Lay Display controll in bottom*/
$(document).ready(function() {
$(" ul.mainNav li.home").mouseover(function() {
$(".overlay").css({'display':'block'});
$(" ul.mainNav").css({'z-index':'8'});
$(" .dropDown").css({'z-index':'8'});
})
}); 

トリックはかなり単純で、2 つのステップです。

(1)overlay要素を表示する

(2)z-indexメニューがオーバーレイの上に表示されるように、ナビゲーション要素と dropDown クラスの を変更します。

オーバーレイは Web サイトの残りの部分よりもビューに近い (Z インデックスが高い) ため、Z 軸を上に移動したナビゲーション要素を除いて、その背景色が Web サイトの残りの部分をマスクまたは薄暗くします。

何を探すべきかがわかったので、CSS と jQuery の詳細を調べて、別の状況でそれを実装する方法を学ぶことができます。