ホームページ >ウェブフロントエンド >CSSチュートリアル >JavaScript を使用して CSS プロパティを動的に変更し、ホバー時の要素の表示/非表示を切り替えるにはどうすればよいですか?
JavaScript を使用して CSS プロパティを動的に変更し、ホバー時の要素の表示/非表示を切り替えるにはどうすればよいですか?
- Mary-Kate Olsenオリジナル
- 2024-12-24 03:12:14294ブラウズ
JavaScript を使用した CSS プロパティの変更
Web 開発の領域では、ユーザーに基づいて要素の外観や動作を動的に変更する必要がある状況に頻繁に遭遇することがあります。相互作用。そのようなシナリオの 1 つは、ホバー時に特定の要素を表示または非表示にしたい場合です。この記事では、CSS プロパティを操作してこの効果を実現する JavaScript ベースの手法について説明します。
JavaScript を使用した CSS プロパティの変更
JavaScript を使用して CSS プロパティを変更するには、次のリンクにアクセスします。要素のスタイルプロパティ。このプロパティを使用すると、要素のスタイルを直接読み取り、変更することができます。次の例を考えてみましょう。
document.getElementById("element").style.property = "new value";
このコードは、ID が「element」である要素の CSS プロパティを「新しい値」に変更します。
マウスオーバー時の表示切り替え
このテクニックを特定のシナリオに適用してみましょう。トリガー要素にカーソルを置いたときに非表示の要素を表示したいとします。 HTML には 2 つの
<div class="left">Hello</div> <div class="center"> <div class="left1">
次に、JavaScript はイベント リスナーを使用して可視性の切り替えをトリガーします:
// Get the trigger elements
const left = document.querySelector(".left");
const right = document.querySelector(".right");
// Define a function to toggle visibility
const toggleVisibility = (element) => {
element.querySelector("div").style.display = "block";
};
// Add event listeners
left.addEventListener("mouseenter", () => toggleVisibility(left));
left.addEventListener("mouseleave", () => toggleVisibility(left));
right.addEventListener("mouseenter", () => toggleVisibility(right));
right.addEventListener("mouseleave", () => toggleVisibility(right));
このコードでは、toggleVisibility 関数はネストされた < の表示プロパティを変更します。 ;ディビジョン>見えるようにするには「ブロック」します。トリガー要素のイベント リスナーはマウス ホバー イベントをリッスンし、それに応じて toggleVisibility 関数を呼び出します。
以上がJavaScript を使用して CSS プロパティを動的に変更し、ホバー時の要素の表示/非表示を切り替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。