0

したがって、css スタイルが添付されたハイパーリンクがあり、:focus で (css) スパン ツールチップが表示されるため、ユーザーがツールチップをクリックすると、<a href>Link</a>その横にツールチップが表示されます。

(これは、:hover がうまく機能しないモバイル ユーザー向けです)

ただし、問題があります。ツールチップにはいくつかのリンクがありますが、ユーザーが元のリンクをクリックすると (:focus がアクティブになります)、ツールチップの別のリンクをクリックすると、明らかに :focus が非アクティブになり、ブラウザが私をそのリンクにリダイレクトすることを認識する前に、リンクが作成されます。ツールチップ内では使用できません。

ユーザーがクリックする「a href」には、次の css があります。

.tooltip:focus span {
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
    font-family: Calibri, Tahoma, Geneva, sans-serif;
    position: absolute; left: 1em; top: 2em; z-index: 99;
    margin-left: 0; width: 270px;
}

クリックしたときにフォーカスを無効にしてツールチップを閉じるのではなく、ツールチップ内でリンクが機能するように変更する方法はありますか?

基本的に私が尋ねようとしているのは、この :focus が別の要素の表示を永続的に設定して、:focus が失われたときにそれ (ツールヒント/ツールヒント内のリンク) が失われないようにする方法があるかどうかです。

私の問題を十分に説明したことを願っています。（そして、はい、JavaScriptを使用できることは知っていますが、むしろCSSを使用したいです）

4

1 に答える 1

1

:focus 疑似クラスを使用する代わりに、:target や :checked などの他のクラスを検討することもできます。ツールチップをトリガーするために非表示のチェックボックスを使用する CodePen の例を次に示します。

http://codepen.io/anon/pen/bEjcy

これにより、探している相互作用が得られる場合があります。

于 2013-02-03T03:59:39.883 に答える