-4

私は Web で見つけた例に基づいて、CSS3 で想定される HTML5 ツールチップを作成しています。

.tooltip {
    border-bottom: 1px dotted #333;
    position: relative; cursor: pointer;
}  

.tooltip:hover:after {
    content: attr(title);
    position: absolute;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.85);
    padding: 3px 7px;
    color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-left: 7px;
    margin-top: -3px;
}

アプリケーションには意図的に HTML や CSS が含まれていないため、これをプログラムで作成するにはどうすればよいですか?

これまでのところ、「後」はCSS セレクターだと思いますが、JavaScript を使用して DOM でこれを作成、アクセス、または変更する方法については、これ以上の情報を見つけることができません。

JavaScript ソリューションのみでお願いします。

4

2 に答える 2

3

を使用して、任意の CSS ルールをドキュメントに追加できますinsertRule。MDNs のページに、任意の CSS ルールを挿入するためのクロスブラウザー対応の方法を示す方法があります。

アプリには HTML が含まれていないため、 を<style>使用して自分でオブジェクトを作成する必要がありますdocument.createElement。スタイルシートが別のオリジンからのものである場合になりますdocument.styleSheets[0].cssRules。null

于 2012-06-27T09:30:23.553 に答える
1

:hoverイベントバウンドと同様に、JSで実行する場合 は、関連するすべてのイベント（たとえばonmouseover、onmouseout）を関連するすべての要素（ここで）にフックする必要があります。/\btooltip\b/.test(className)

イベントを共通の親にバインドするだけで済みます（たとえばdocument.body、eventオブジェクトを調べて、イベントを不明な数の要素にアタッチする代わりに、イベントをトリガーした要素を修飾します）。

については、これは選択した要素の後に挿入される疑似要素であり、その:afterため、ホバーし:hoverたときにのみドキュメントに表示されます。したがって、DOMメソッドを使用して要素を追加/削除するだけです（毎回作成する必要はありません。一度作成すれば、参照を保持できます）。

要素を追加/削除する代わりに、要素を1回追加するだけで、表示を切り替えることができる場合があります（例element.style.display = visible ? '' : 'none';）。

あなたがすることはあなた次第です。

于 2012-06-27T10:54:11.317 に答える