jqueryマウスホバーナビゲーション下線スライドアウトサンプル共有-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jqueryマウスホバーナビゲーション下線スライドアウトサンプル共有

小云云

Jan 29, 2018 pm 05:15 PM

jquery 下線ナビゲーション

この記事では主に、jquery マウスホバーナビゲーションの下線スライドアウト効果を詳しく紹介します。興味のある方は参考にしていただければ幸いです。。みんなに。

この記事の例では、参考のために jquery マウスホバーナビゲーションの下線スライドアウト効果の特定のコードを共有します。具体的な内容は次のとおりです

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery鼠标悬停导航下划线滑出效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}

.header{ width:100%; background:#F5F5F5;}
.nav{ width:1000px; margin:0 auto; overflow:hidden;}
.nav ul li{ height:40px; line-height:40px; float:left; padding:10px 5px; margin:0px 5px;position:relative;}
.nav ul li a{ color:#666; font-family:&#39;Microsoft Yahei&#39;; font-size:14px; text-decoration:none;}
.nav ul li a:hover{ color:#000; text-decoration:none;}
.nav ul li span{ display:block; position:absolute; width:0px; height:0px; background:#1FAEFF; top:58px; left:50%;}
</style>
</head>
<body>
<p class="header">
<p class="nav">
<ul>
<li><a>首页</a><span></span></li>
<li><a>菜单导航</a><span></span></li>
<li><a>时间日期</a><span></span></li>
<li><a>焦点图</a><span></span></li>
<li><a>tab标签</a><span></span></li>
<li><a>jquery特效</a><span></span></li>
<li><a>相册代码</a><span></span></li>
<li><a>图片特效</a><span></span></li>
<li><a>名站特效</a><span></span></li>
</ul>
</p>
</p>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$(&#39;.nav li&#39;).hover(function(){
$(&#39;span&#39;,this).stop().css(&#39;height&#39;,&#39;2px&#39;);
$(&#39;span&#39;,this).animate({
left:&#39;0&#39;,
width:&#39;100%&#39;,
right:&#39;0&#39;
},200);
},function(){
$(&#39;span&#39;,this).stop().animate({
left:&#39;50%&#39;,
width:&#39;0&#39;
},200);
});
});
</script>
</body>
</html>

ログイン後にコピー

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1671

CakePHP チュートリアル

1428

Laravel チュートリアル

1331

PHP チュートリアル

1276

C# チュートリアル

1256

Related knowledge

WPS ドキュメントの空白の下線が印刷できないのはなぜですか?どのように下線を引けばよいですか? Mar 20, 2024 am 09:40 AM

Word でテキストを入力するとき、説明や強調のために一部の位置に下線を引く必要がある場合がありますが、WPS 文書内の空白の下線が印刷できないのはなぜでしょうか。アンダーラインはどのように引けばよいのでしょうか?以下で編集者が詳しく紹介しますので、見てみましょう。 WPS ドキュメントでは、図に示すように空白スペースに下線を引くことができます。どうやってするの？詳しい操作方法は以下をお読みください。図の文書を例として、空白スペースに下線を引く方法を示します。画像の「名前」のコロンの右側にカーソルを置き、キーボードのスペースバーを押します。デモンストレーションを容易にするために、以下に示すようにフォントサイズを大きくしています。カーソルが設定位置に到達したら、放さずにクリックしたままにして、図に示すように左側のコロンの横にドラッグします。 3. 次に、図の矢印で示されている「下線」アイコンをクリックします。絵。

jQueryのリファレンスメソッドを詳しく解説：クイックスタートガイド Feb 27, 2024 pm 06:45 PM

jQuery 参照方法の詳細説明: クイックスタートガイド jQuery は、Web サイト開発で広く使用されている人気のある JavaScript ライブラリであり、JavaScript プログラミングを簡素化し、開発者に豊富な機能を提供します。この記事では、jQuery の参照方法を詳しく紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。 jQuery の導入まず、HTML ファイルに jQuery ライブラリを導入する必要があります。 CDN リンクを通じて導入することも、ダウンロードすることもできます

Excelで下線を入力する方法 Mar 20, 2024 am 08:37 AM

社会の発展に伴い、テクノロジーも急速に発展し、オフィスには電子機器が標準装備されています。現在、オフィスソフトにはさまざまな種類があります。オフィスソフトの中でもExcelは今でもよく使われています。設定を表で行うこともあります。 . これらのコンテンツを強調するために、異なる色のフォントを選択したり、フォントを濃くしたり、強調するために下線を引いたりします。フォントの設定は簡単ですが、誰もが下線の追加方法を知っているわけではありません。編集者今日は初心者の友達に教えますエクセルで下線を引く方法。 1. Excel を開いて、下の図に示すように、いくつかの単語を入力します。 2. 以下の図に示すように、テキストを選択し、右クリックして「セルの書式設定」オプションを選択します。 3. 「単一の下線」を見つけて、

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエストメソッドを使用した具体的なコード例です。まず、jQuery ライブラリファイルが含まれていることを確認してから、$.ajax({u

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキストコンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

jQuery を使用してすべての a タグのテキストコンテンツを変更する Feb 28, 2024 pm 05:42 PM

タイトル: jQuery を使用して、すべての a タグのテキストコンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンクタグ (タグ) のテキストコンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

Amap、運転ETAサービスのアップグレード版を開始：現在の道路状況のリアルタイム分析とより正確な到着予想時刻 Apr 30, 2024 am 08:37 AM

4月29日の当サイトのニュースによると、Amapは運転ETAのアップグレード版の開始を正式に発表した（当サイト注：ETAとは到着予定時刻であり、ユーザーが出発するまでにかかる推定時間を指す））サービスは、ユーザーがより正確にルートを計画し、所要時間と交通状況を推定し、旅行の決定を支援することを目的としています。この地図アプリケーションは、最新のアップグレードされた Amap アプリケーションであり、「超大規模グラフ畳み込みニューラルネットワークモデル」が導入されており、交通の流れのパターンをより適切に捕捉して学習し、都市の道路網と高速道路システムをサポートし、時空間を正確に描写できます。交通状況の動的な変化。さらに、新しいバージョンのマップでは、iTransformer 時系列予測モデルがさらに統合され、リアルタイム分析がサポートされます。

jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます

See all articles

jqueryマウスホバーナビゲーション下線スライドアウトサンプル共有

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック