5

JavaScript を使用せずにインライン CSS を使用してホバー ツールチップを作成しようとしています。

これは私が今持っているコードです

<a href="#" 
style="{position:relative; top:50px; left:50px;}
       :hover span {opacity:1; visibility:visible;}">
  hover text
  <span 
  style="top:-10px; background-color:black; color:white; border-radius:5px; opacity:0; position:absolute; -webkit-transition: all 0.5s; -moz-transition:  all 0.5s; -ms-transition: all 0.5s; -o-transition:  all 0.5s; transition:  all 0.5s; visibility:hidden;">
    tooltip text
  </span>
</a>

これによると、許可する必要があります: http://www.w3.org/TR/2002/WD-css-style-attr-20020515

これが推奨される方法ではないことは承知していますが、インライン CSS しか使用できない場所で使用できる必要があります。

4

3 に答える 3

8

あなたはかなり近かったので、いくつかのプロパティを追加しました：

HTML マークアップ:

<a href="#" class="tooltip">hover text
  <span>tooltip thisIsALongTextMadeToBeBreak</span>
</a>

CSS マークアップ:

a.tooltip {
    position: relative; 
    top: 50px; 
    left: 50px;
}

a.tooltip:hover span {
    opacity: 1; 
    visibility: visible;
}

a.tooltip span {
    padding: 10px;
    top: 20px;     
    min-width: 75px;
    max-width: 150px;
    background-color: #000000; 
    color: #FFFFFF;
    height: auto;
    border-radius: 5px; 
    opacity: 0; 
    position:absolute;
    visibility: hidden;
    word-wrap: break-word;
    -webkit-transition: all 0.5s; 
       -moz-transition: all 0.5s; 
        -ms-transition: all 0.5s; 
         -o-transition: all 0.5s; 
            transition: all 0.5s;    
}

確認したい場合は、ここにライブデモがあります

必要に応じて、ここでさらにいくつかの例/アイデアを確認できます

それが役に立てば幸い！

于 2013-10-02T03:57:26.077 に答える
0

一番上の回答は、質問の特定の文字に完全には対応していませんが (コメントが示唆しているように、これは不可能かもしれません)、貴重なプラグアンドプレイソリューションを提供します (スタイルシートにアクセスできる場合)。私も同様の状況に陥りましたが、ページのスタイル シートを変更できなかった (html を挿入することしかできなかった) ため、効果的であるが質問の詳細を見逃している回答も提供すると思いました。

特に、 JavaScript を少し使用したい場合は、次のハック手法を利用できます。

<div 
   onMouseOver="this.children[0].style.display = 'block'"
   onMouseOut="this.children[0].style.display = 'none';"
   >Example Content
    <span id="innerContent" style="
    display: none;
    background: #C8C8C8;
    margin-left: 28px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    width:200px;
    height:100px;">Inner Content</span>
</div>

querySelector の代わりに this.children を使用するのは意図的なものです。これにより、内部要素を取得するために ID を調整する必要がなく、簡単に立ち寄ることができます。このスタイリングは、この fiddleから取得されます。

于 2021-06-24T18:26:00.047 に答える