0

こんにちは、要素にタイトル属性を設定するためにこれを使用しています:

$('.upgradeTables thead tr td:gt(1)').attr('title', 'Upgrade To');

次に、CSS3 を使用してこれを行います。

.upgradeTables thead tr td:hover:before
{
    background: #000;
    content: attr(title);
    color: #f7f7f7;
    opacity: 0.95;
    display: block;
    font-weight: bold;
    position: relative;
    text-align: center;
    top: 0px;
    padding: 5px;
    -webkit-box-shadow: 1px 1px 10px 0.5px #333 !important;
    -moz-box-shadow: 1px 1px 10px 0.5px #333 !important;
    box-shadow: 1px 1px 10px 0.5px #333 !important;
}

私の質問は、要素にカーソルを合わせると、適切な CSS のタイトルが希望どおりに表示され、TD に沿って移動でき、すべての上に「アップグレード先」が表示されることです。

問題は、最初のものにカーソルを合わせると、CSS タイトルが表示されるだけでなく、デフォルトの灰色のブラウザー タイトルが表示され、他の TD に移動しても表示されたままになることです。デフォルトのタイトルのポップアップを非表示にしながら、ホバー時に CSS:after タイトルを表示するにはどうすればよいですか?

4

2 に答える 2

2

残念ながら、CSS でツールチップを無効にする単純な CSS の方法はありません。とにかく、あなたの例で title 属性を使用することは、実際にはセマンティックではないことをお勧めします (title 属性は、リンクの背後にあるものを説明するためのものです)。

別の方法は、html5 の data attributesを使用することです。これにより、コードは次のようになります...

$('.upgradeTables thead tr td:gt(1)').attr('data-tooltip', 'Upgrade To');

そしてあなたのcss宣言...

content: attr(data-tooltip);
于 2011-07-12T15:52:31.067 に答える
1

title問題は、ブラウザーが属性を含むツールチップを表示するのを防ぐ方法がないことです。ですから、現在のアプローチでこれを解決する機会はありません。

属性を設定する代わりに、title単にツールチップを に挿入するとどうなるでしょうdocument.ready()か? これにより、より予測可能なコードが得られます。ツールチップを必要な位置に配置するだけで、問題が解決するはずです。

jsFiddle スニペット

于 2011-07-12T21:32:45.053 に答える