検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSSでハイパーリンクをクリックできないように設定する方法

CSSでハイパーリンクをクリックできないように設定する方法

藏色散人
藏色散人オリジナル
2021-04-29 11:27:012565ブラウズ

CSS でハイパーリンクをクリックできないように設定する方法: 最初に「cursor:pointer;」属性を使用してマウスを矢印に変え、次に「pointer-events:none;」属性を使用してハイパーリンクを無効にし、クリックできないようにします。

CSSでハイパーリンクをクリックできないように設定する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター。

CSS 設定を使用してハイパーリンクをクリックできないか無効にする

##cursor :pointer ;

pointer-events: none;
最初の行は、マウスを小さな手の形ではなく矢印に変えます。
2 行目は、ハイパーリンク コードを無効にします。

Notタグとiframeタグのみも有効です例は以下の通りです: 

<!DOCTYPE html><html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a class="weather" href="http://www.baidu.com" >测试</a>
		<iframe class="weather" allowtransparency="true" frameborder="0" width="385" height="96" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=2&z=2&t=0&v=0&d=3&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=0&a=0&c=60813&w=385&h=96&align=center"></iframe>
	</body>
	<style type="text/css">
	.weather{
	    color:gray;
	    cursor:pointer;
	    pointer-events: none;
	}	</style></html>

CSSでハイパーリンクをクリックできないように設定する方法

元の表示効果: マウスを置くと小さな手になります形状が変化すると、スタイルが変わり、クリックするとジャンプします。 ハイパーリンクへ

CSSでハイパーリンクをクリックできないように設定する方法#変更後の表示効果: マウスをホバーすると矢印の形になります。クリックしても反応がありません。

HTML/CSS の詳細については、

CSS ビデオ チュートリアル

列を参照してください。

以上がCSSでハイパーリンクをクリックできないように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

関連記事

続きを見る