0

私が欲しいのはおそらく単純すぎるし、私が見つけた応答に少し圧倒されます！

*** javascriptを使用しないので、純粋なCSS/HTMLソリューションを好みます。***

現在私が行っているのは、アンカータグ内のTITLE属性を使用して、リンクに関する情報を表示することです（http://www.helpdesk.net.au/index_safety_driver.htmlを参照し、いくつかのリンクにマウスオーバーします）。

私がやりたいのは、そのコンテンツに対してもう少し柔軟で興味深いものを用意することです。そのため、タイトルではなく、ホバーのリンク上にDIVをフローティングすることを検討しています（DIVがない場合に備えてタイトルを残すことはできますか？ tサポート-フェイルセーフとして？）。

http://www.barelyfitz.com/screencast/html-training/css/positioning/のコンセプトが気に入っていますが、左上隅に画像のオプションが必要です。

4

4 に答える 4

1

私はあなたの質問から理解したことを達成しようとしました。ここでフィドルを確認してください：http://jsfiddle.net/rakesh_vadnal/RKxZj/1/

HTML:

<div id="button"><h3>button</h3>
<div id="two">Hovered content</div>
</div>

CSS:

#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
width:98px;
height: 0;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#button:hover > #two {
display:block;
left:0px;
height:100px;
}
于 2012-12-22T05:14:50.337 に答える
1

Sexy Tooltips with Just CSSというチュートリアルがあり、まさにあなたが探しているものかもしれません。注意すべき点が 2 つあります。

  1. titleこのソリューションでは、属性から直接読み取るのではなく、ツールチップを HTML マークアップに含める必要があります。HTML に対するセマンティックなアプローチでは、これは間違ったアプローチだと思います。CSS3 を使用すると、疑似要素titleのプロパティの値として属性を利用できます。contentただし、Javascript を使用してデフォルトのツールチップをキャンセルしないと、両方のツールチップが表示されます (このデモ jsfiddleを参照してください)。この手法、その実装、および問題点に関するより長い議論は、CSS3 Only TooltipsおよびStack Overflow: How to change the style of Title attribute inside the anchor tag?で見つけることができます。
  2. 古いブラウザーのサポートを引き続き提供している場合は、IE7がタグ:hover以外のセレクターに従わないことに注意してください。Aタグ以外の要素に対して IE7 でツールチップを表示する必要がある場合は、AJavascript を使用して、ホバー時に要素からクラスを追加/削除し、そのクラスを使用してスタイルを設定する必要があります。
于 2012-12-22T05:42:19.693 に答える
0 
<div id="one"><h3>hover over me</h3>
    <div id="two">Hovered content</div>
</div>

#one {
    background:#443322;
    position:relative;
    width:100px;
    height:30px;
    display:block;
    color:#FFFFFF;
}
#two {
    background:#223344;
    position:absolute;
    width:100px;
    height:100px;
    display:none;
    color:#FFFFFF;
}
#one:hover #two {
    display:block;
    left:100px;
}
于 2012-12-22T02:53:32.470 に答える