jQuery の hover メソッドは、選択した要素のハイライトを実装します。

この記事では主に、選択要素のハイライト方法を実現するjQueryのhoverメソッドとcssのhover selectorについての記事をお届けします。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

今日、先輩のお姉さんのウェブページ作成を手伝っていたときに、次のようなリクエストに遭遇しました:

マウスをフォーム内に移動させてはならず、フォームの透明度は変更されないはずです。

マウスがテーブル内に移動すると、ホバーされたセルの透明度は変化せず、ホバーされていないセルの透明度が変化します。

まず、私が達成した効果を投稿します。最初は、テーブルの透明度は変わりません。

マウスを 2 行目の 3 番目のセルに移動すると、他のセルの透明度が下がります。

解決策

最初は以下のCSS実装方法を使用しました

#table td{
 opacity:0.5;
}
#table td:hover{
 opacity:1;
}

しかし、最初に入力するとテーブルの透明度が0.5になっていて非常に見栄えが悪いです。

その後、jQuery の hover メソッドを使用しましたが、そのプロセスは常に非常に複雑だったので、それを実現する方法については 1 つずつ紹介しません。

$('#content td').hover(
  function(){
   $('#content td').css('opacity','0.5');
   $('#content td:hover').css('opacity','1');
   },
  function(){
   $('#content td').css('opacity','1');
  });

content はテーブルの ID 名です。セルのホバー メソッドに 2 つの関数を追加したことがわかります

最初の関数がテーブルに移動されると、チーフ

$('#content td') . css('opacity','1');

は、マウスが移動すると、すべてのセルの透明度が 0.5 になり、その後

$('#content td:hover').css(' opacity',' 1');

ここでCSSのホバーセレクターとは、単一のセルを選択することを意味します。

2 番目の関数は、マウスがフォームから離れるときを表します

関連する推奨事項:

ホバーの使用例の概要

CSS でのホバーセレクターの使用の詳細な説明

ホバーイベントとクリックイベントの関係についてjQueryでの競合の詳しい説明(画像)

以上がjQuery の hover メソッドは、選択した要素のハイライトを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。