純粋なCSSの上にマウスを置いたときにボックスを作成するにはどうすればいいですか？

私はこれを何度もやってみましたが、まだうまくいきませんでした。 Iこのテキストの上にマウス純粋なCSSの上にマウスを置いたときにボックスを作成するにはどうすればいいですか？

enter image description here

次に、それは、私は誰もがこれを行うことができれば、純粋なCSSでこの効果を実現したい、このボックス

enter image description here

私を示さなければならない

。

2012-04-20 Rohit Azad

おそらく、この回答に興味があるかもしれません - http://stackoverflow.com/questions/1055581/how-do-i-add-a-tool-tip-to-a-span-element/25836471#25836471 –

あなたはこのように書くことができます。

CSS

span{ 
    background: none repeat scroll 0 0 #F8F8F8; 
    border: 5px solid #DFDFDF; 
    color: #717171; 
    font-size: 13px; 
    height: 30px; 
    letter-spacing: 1px; 
    line-height: 30px; 
    margin: 0 auto; 
    position: relative; 
    text-align: center; 
    text-transform: uppercase; 
    top: -80px; 
    left:-30px; 
    display:none; 
    padding:0 20px; 

} 
span:after{ 
    content:''; 
    position:absolute; 
    bottom:-10px; 
    width:10px; 
    height:10px; 
    border-bottom:5px solid #dfdfdf; 
    border-right:5px solid #dfdfdf; 
    background:#f8f8f8; 
    left:50%; 
    margin-left:-5px; 
    -moz-transform:rotate(45deg); 
    -webkit-transform:rotate(45deg); 
    transform:rotate(45deg); 
} 
p{ 
    margin:100px; 
    float:left; 
    position:relative; 
    cursor:pointer; 
} 

p:hover span{ 
    display:block; 
}

HTML

<p>Hover here<span>some text here ?</span></p>

チェックこのhttp://jsfiddle.net/UNs9J/1/

出典

2012-04-20 09:33:27 sandeep

うーん、それはいい:)あなたは互換性が何であるか知っていますか？回転（「矢印」）はおそらくIE /オペラでは動作しませんが、それ以外の制限はありますか？ – Nanne

Operaを＆amp; IEのために回転させると、IEフィルターを使うことができます。http://www.boogdesign.com/b2evo/index.php/element-rotation-ie-matrix-filter?blog=2 – sandeep

また表示を切り替えることによってそれを行うことができますホバー上のブロックと表示：効果を生成するために、ホバーなしなし。

出典

2012-04-20 09:29:57 Ankit

あなたはこれを簡単に行うことができます簡単なコードによるCSSツールヒント： -

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
a.info{ 
    position:relative; /*this is the key*/ 
    color:#000; 
    top:100px; 
    left:50px; 
    text-decoration:none; 
    text-align:center; 
    } 



a.info span{display: none} 

a.info:hover span{ /*the span will display just on :hover state*/ 
    display:block; 
    position:absolute; 
    top:-60px; 
    width:15em; 
    border:5px solid #0cf; 
    background-color:#cff; color:#000; 
    text-align: center; 
    padding:10px; 
    } 

    a.info:hover span:after{ /*the span will display just on :hover state*/ 
    content:''; 
    position:absolute; 
    bottom:-11px; 
    width:10px; 
    height:10px; 
    border-bottom:5px solid #0cf; 
    border-right:5px solid #0cf; 
    background:#cff; 
    left:50%; 
    margin-left:-5px; 
    -moz-transform:rotate(45deg); 
    -webkit-transform:rotate(45deg); 
    transform:rotate(45deg); 
    } 


</style> 
</head> 
<body> 
<a href="#" class="info">Shailender Arora <span>TOOLTIP</span></a> 
    </div> 
</body> 
</html>

http://jsbin.com/ebucoz/25/edit

出典

2012-04-20 09:44:25

これは、他の回答に小さな微調整です。ネストされたdivがある場合は、ポップアップにH1などのよりエキサイティングなコンテンツを含めることができます。

CSS

div.appear { 
    width: 250px; 
    border: #000 2px solid; 
    background:#F8F8F8; 
    position: relative; 
    top: 5px; 
    left:15px; 
    display:none; 
    padding: 0 20px 20px 20px; 
    z-index: 1000000; 
} 
div.hover { 
    cursor:pointer; 
    width: 5px; 
} 
div.hover:hover div.appear { 
    display:block; 
}

これらの解決策に伴う問題は、ポップアップが表示されたときにページで、この後のすべてがシフトしてしまうことですHTML

<div class="hover"> 
<img src="questionmark.png"/> 
    <div class="appear"> 
     <h1>My popup</h1>Hitherto and whenceforth. 
    </div> 
</div>

、すなわち、ページの残りの部分が下向きにジャンプします「空間を作る」。私がこれを解決できる唯一の方法は、位置を作ることであった：絶対的なものと、左上のCSSタグと左のCSSタグを取り除くこと。

出典

2013-09-05 15:20:15 Chris

まさに彼らが言ったことは、うまくいくでしょう。

親要素では、最大高さを設定します。

私はsandeepの例をとり、max-heightを追加し、必要に応じてmax-widthプロパティを追加できます。 2番目ののp段落内のテキストそれが滞在する場所を（可能ならば、いくつかのケースではあなたはそれがそこに滞在するためにいくつかの値を変更する必要があります、）

span{ 
    background: none repeat scroll 0 0 #F8F8F8; 
    border: 5px solid #DFDFDF; 
    color: #717171; 
    font-size: 13px; 
    height: 30px; 
    letter-spacing: 1px; 
    line-height: 30px; 
    margin: 0 auto; 
    position: relative; 
    text-align: center; 
    text-transform: uppercase; 
    top: -80px; 
    left:-30px; 
    display:none; 
    padding:0 20px; 
} 

span:after{ 
    content:''; 
    position:absolute; 
    bottom:-10px; 
    width:10px; 
    height:10px; 
    border-bottom:5px solid #dfdfdf; 
    border-right:5px solid #dfdfdf; 
    background:#f8f8f8; 
    left:50%; 
    margin-left:-5px; 
    -moz-transform:rotate(45deg); 
    -webkit-transform:rotate(45deg); 
    transform:rotate(45deg); 
} 

p{ 
    margin:100px; 
    float:left; 
    position:relative; 
    cursor:pointer; 
    max-height: 10px; 
} 

p:hover span{ 
    display:block; 
}

滞在する最大の高さ最後の1行、最後の行

無用と評価する前にテストしてください。

出典

2015-07-19 22:25:36

既存の回答ですか？ – cimmanon

max-heightおよびmax-widthプロパティが追加されました。カーソルがテキストの上にあり、ボックスが表示されているときは何も移動しません。 –

純粋なCSSの上にマウスを置いたときにボックスを作成するにはどうすればいいですか？

答えて

関連する問題