4

重複の可能性:
リンクと <abbr> のブラウザー ツールチップを無効にする 

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

タイトルタグのデフォルトの動作を変更する次のコードがあります。これは正常に機能しますが、問題は、タイトルもデフォルト スタイルで表示されることです。これが私のフィドルリンクです。

jQuery または CSS を使用してこの問題を解決する方法はありますか?

4

2 に答える 2

2

私が考えることができる最も良いことは、jQuery（またはプレーンJS）で属性の設定を解除することです

$('a').attr('title', '');

after次に、 JSを使用して行ったのと同じようにdivを作成します。私の知る限り、のデフォルトの動作を無効にする方法はありませんtitle。

編集：

これに反対票を投じた人を指摘するためだけに、質問は正しく答えられます。JSを使用しているために答えに誤りがあると判断した場合は、投稿のタイトルを読んでください。独自の属性を作成することは愚かであり、（率直に言って）特定の割合の「Web開発者」の何が問題になっています。思ったとおりに機能しないために何かをハッキングするのは近視眼的です。タイトルタグはWAI-ARIAとセクション503の問題であるため、それらを役に立たなくするのはばかげています（そして、標準に固執することで得たSEOクレジットを忘れないでください）。

于 2012-10-01T15:59:03.953 に答える
0

^解決済み

titleタグの名前を変更します

これを使用するには

<a href="#" atitle="this is title"> hello </a>

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[atitle]:hover:after {
  content: attr(atitle);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
于 2012-10-01T16:22:50.327 に答える