コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

Jquery ボタンをクリックすると、実装原則と code_jquery が自動的に強調表示されます。

WBOY
リリース： 2016-05-16 16:51:05
オリジナル
1123 人が閲覧しました

実際、原理は非常に簡単です。クリックすると、要素にカスタム属性が追加され、数秒後に自動的に背景に適合するスタイルが削除されます。元の状態に戻す

まず独自の js でメソッド hoverEl を拡張します

コードをコピーします コードは次のとおりです

$ .extend($.fn, {
hoverEl:function(){

var _this = $(this);
var _t = setTimeout (function(){
_this.attr( "hover", "on");
}, 10);

setTimeout (function(){
clearTimeout( _this.attr("hoverTimeout") );
var _t = setTimeout(function(){
_this.removeAttr("hover");
}, 100 );
_this.attr("hoverTimeout" , _t);

}
}); 次にスタイルを定義します。 、特定の属性が追加されるとき



コードをコピー
コードは次のとおりです: li[ hover=on]{ background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#194FDB), to(#4286F5))! important; background-image : -webkit-linear-gradient(top, #4286F5, #194FDB )!重要;
色: 白!重要;
カーソル:
}


呼び出し例:



コードをコピー
コードは次のとおりです: $(e.target) .hoverEl();
関連ラベル：
ボタンをクリックします
ソース：php.cn
前の記事：スタイルの変更を防ぐために JS コンテナの非表示の外観を制御する 2 つの方法_JavaScript スキル 次の記事：jqueryの右クリックを無効にするexample_jquery
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
Android 上の React-Native でステータス更新が機能しない スワイプ可能な水平ギャラリーに画像のペアを含むコードがいくつかあります。両方の画像の上部をクリックすると、画像がオフに切り替わるはずです。そのため、私が行ったのは、isImage2...
から 2024-04-06 16:54:10
0
1
410
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
React でスリーステート スイッチングを実装する最良の方法は? React で、ある状態から次の状態への状態変更をトリガーするボタンをいくつか作成しています。ボタンの中には、列挙型で表される 3 つの状態を持つものもあります。これら 3 つの状...
から 2024-04-06 13:51:32
0
1
418
送信後に選択したチェックボックスの値を印刷する方法 これは、データを送信するために必要なチェックボックスとボタンのリストです。<label>AccessLocations</label><br/>...
から 2024-04-06 13:07:43
0
2
337
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート