-4

スパン クラスにカーソルを合わせたときに、このツールチップの表示プロパティを変更したい

これは、ユーザーがカーソルを合わせるスパンです

<span class="video-title"></span>

これは表示されるツールチップです

<span class="toolTip">Top 10 Latest</span>

そして、これはcssスタイルです

.toolTip{
    position:absolute;
    top:-34px;
    left:47px;
    z-index:100;
    display:none;
    padding:5px 6px 5px 6px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    background-color:#000;
    text-align:center;
    text-decoration:none;
    text-shadow:black 0 1px 0;
    white-space:nowrap;
    font-style:normal;
    font-size:11px;
    font-family:Helvetica,Arial,sans-serif;
    line-height:1
}

質問は、ディスプレイの変更に最適なものはどれですか? Javascript または Css
と、これを行うにはどうすればよいですか?

乾杯！

4

1 に答える 1

0

これは CSS でかなり簡単に行うことができます。ツール ヒントspanをビデオ タイトル内に配置するとspan、 に設定して、ビデオ タイトルをホバーしたときにdisplay:noneに変更できます。display: block

<span class="video-title">
    Title text here
    <span class="tooltip">Tooltip text here</span>
</span>

.video-title {position: relative}
.tooltip {display: none;}
.video-title:hover .tooltip {display: block; position: absolute;}

明らかに、それに独自のスタイルとポジショニングを追加します。ツールチップは、ページのレイアウトを妨げないように絶対位置に配置するのが理想的です。親を に設定するとposition: relative、ページ上の親の位置に関連してツールチップが配置されます。

于 2013-03-10T22:04:23.683 に答える