クリックエリア100%のスライドドアコード
標準を勉強している友人は、通常、学習の過程で css スライディング ドア テクノロジーに触れるでしょう。もしかしたら、この記事「css のスライディング ドア テクノロジー」も読んだことがあるかもしれません。これまで触れたことがない、または経験したことがない場合は、まだ読んでいませんが、上記の記事を読んだことがあっても、内容を忘れてしまったとしても問題ありません。まず、上の記事のリンクをクリックして理解または確認してください。
記事「css のスライド ドア テクノロジー」のスライド ドアの例で、注意深く実験してみると、リンク領域にクリックできない 9 ピクセルの死角があることが判明したかもしれません。 ie ではテキストのみをクリックできます。部分的なサイズのため、ボタン ブロック全体をクリックできません。私たちが期待できるのは、ボタン ブロック全体をクリックでき、死角が許されないということです。
では、それを達成するにはどうすればよいでしょうか?いくつかの解決策について一緒に議論しましょう:
まず、便宜上、「css のスライディング ドア テクノロジー」のコードを移動しましょう:
xhtml 部分:
<div id="header"> <ul> <li><a href="#">home</a></li> <li id="current"><a href="#">news</a></li> <li><a href="#">products</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> </div>
css 部分:
#header { float:left; width:100%; background:#DAE0D2 url("bg.gif") repeat-x bottom; font-size:93%; line-height:normal; } #header ul { margin:0; padding:10px 10px 0; list-style:none; } #header li { float:left; background:url("left.gif") no-repeat left top; margin:0; padding:0 0 0 9px; } #header a { float:left; display:block; background:url("right.gif") no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#765; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #header a {float:none;} /* End IE5-Mac hack */ #header a:hover { color:#333; } #header #current { background-image:url("left_on.gif"); } #header #current a { background-image:url("right_on.gif"); color:#333; padding-bottom:5px; }

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています(注:使用できなくなりました)。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理:Focus-Visible」をご覧ください。で

インラインテキストエディターの構築は些細なものではありません。 このプロセスは、ターゲット要素を編集可能にすることから始まり、その過程で潜在的なSyntaxerrorの例外を処理します。 エディターの作成 このエディターを構築するには、コンテンツを動的に変更する必要があります

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。 特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム

このチュートリアルは、node.js、Express、およびMulterを使用してファイルアップロードシステムを構築することをガイドします。 単一および複数のファイルのアップロードをカバーし、後で検索するためにMongoDBデータベースに画像を保存することさえ示します。 まず、プロジェックをセットアップします
