ホームページ  >  記事  >  ウェブフロントエンド  >  CSSマウス風カーソルの説明

CSSマウス風カーソルの説明

不言
不言オリジナル
2018-06-12 11:07:222432ブラウズ

この記事では主にCSSマウススタイルカーソルの説明を紹介していますので、必要な友達に共有してください

たまたまマウススタイルエフェクトを使用する必要があったのでまとめました。次の 15 個の CSS マウス スタイル、誰でも使用できる小さな例です

CSS マウス スタイルの構文は次のとおりです:

style="cursor:*" を任意のタグに挿入します
例:

<span style="cursor:*">文本或其它页面元素</span>  <a href="#" style="cursor:*">文本或其它页面元素</a>

注意してください* を次の 15 個の効果に置き換えます。 1 つ:

これら 15 個の効果の説明は次のとおりです。説明の上にマウスを移動すると、マウスに何が起こるか見てみましょう。

handは手の形です
例:CSSマウスの手の形のエフェクト

 <a href="#" _fcksavedurl=""#"" _fcksavedurl=""#"" _fcksavedurl=""#"" _fcksavedurl=""#"" style="cursor:hand">CSS鼠标手型效果</a>

pointerも手の形ですが、こちらは様々なブラウザで使えるのでおすすめです。
例:CSSマウスの手の形のエフェクト

<a href="#" _fcksavedurl=""#"" _fcksavedurl=""#"" style="cursor:pointer">CSS鼠标手型效果</a>

crosshairはクロスヘアです
例:CSSマウスの十字のシェイプエフェクト

<a href="#" _fcksavedurl=""#"" _fcksavedurl=""#"" style="cursor:crosshair">CSS鼠标十字型 效果</a>

helpは疑問符です
例:CSSマウスの疑問符エフェクト

<a href="#" _fcksavedurl=""#"" style="cursor:help">CSS鼠标问号效果</a>

以下の書き方は同じですが、だからここでは一つ一つ書きません。終わりです。
以下では、これら15の効果について説明します。説明の上にマウスを移動すると、マウスに何が起こるか見てみましょう。
handはハンドタイプです
ポインターもハンドタイプです 様々なブラウザで使用できるのでこちらを使用することをお勧めします。
クロスヘアは十字型です
テキストはテキストに移動する効果です
waitは待機する効果です
defaultはデフォルトの効果です
helpは疑問符です
e-resizeは右向きの矢印です
ne-resize矢印は右上向きです
n-resize は上向き矢印
nw-resize は左上向き矢印
w-resize は左矢印
sw-resize は左下向き矢印
s-resize は下向き矢印
se-resizeは上向きの矢印です。右下の矢印
autoはシステムによって自動的に与えられます

以上がこの記事の全内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHP 中国語 Web サイトに注意してください。

関連する推奨事項:

CSS の使用方法 トランジション属性は、アニメーションの表示と非表示を備えた WeChat アプレット ウィジェットを実装します

CSS の border 属性で Web ページの点線を作成します

以上がCSSマウス風カーソルの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。