矢印の付いた四角形のボックスを取得すると、CSSのリンクが表示されます

Question

私は矢印で四角形のボックスを取得しようとしています。

   <a href="//">NAME</a> 

私は矢印付きの四角形のボックスを取得しようとしています。 たとえば、 Usernameのホバー上にあるFacebookのようなもので、中身の入った長方形のボックスが表示されます。

どのようにCssをこのアプリケーションに適用しますか？

Answer 1

は、私の知る限り、あなたの非常に漠然とした質問を理解して、私はあなたがいると思うsomething like this後：

HTML：

<a href="#" title="Hover me!">Hover Me</a> 

CSS：

a 
{ 
    display: inline block; 
    height: 50px; 
    padding: 10px; 
    color: #000;  
    background-color: transparent; /*default value, used here to illustrate*/ 

} 

a:hover 
{ 
    background-color: #f00; 
} 

---

あなたの編集後、我々はついに理解する！

私の提案は、this very websiteに行って、素晴らしいツールチップを身に付けさせることです。非常に汎用性があり、実装が非常に簡単で、jQueryとそのプラグインを組み込み、HTMLをセットアップするだけです。あなたが探していることは、ツールチップで、さまざまなソリューションは、（ととJavaScriptなし）があります。

それは私が右だと思う

Answer 2

:)簡単ですので、私は答えとしてこれを掲示していますそこに。私の個人的なお気に入りはprototip 2です。

facebookの内容を正確に取得するには、thisが役に立ちます（coda popup bubblesに基づく）。

EDIT：あなたはalredyツールチップを持っているだけのFacebookの一つに、CSSと同様の使用するwan't場合は、IEで、Firefox用（firebugを使用しようとだけでF12を押して、開発者向けツールを使用して...クロムにもこのようなものがあります、Googleに尋ねてください）htmlとそれに適用されるCSSルールを調べます。

Answer 3

あなたは必要なものを達成するためにcssとjqueryを使用できます。私は、リンクのための3つのクラスを使用して、この http://jsbin.com/amaga4

、mytextと呼ばれるポップアップ内のテキストをmypopupと1という名前のポップアップdivのためのmylink 1程度速いの例を作りました。 mypopup divには、それを非表示にするためのdisplay:noneがあります。

ザ・あなたは.mylink aのためにjqueryのイベントmouseoverとmouseleaveを使用してshow()を使用してDIV mypopupを見えるようにしてhide()

CSS

.mylink {width:300px; text-align:right;} 
.mylink a {color:#0CF; font-size:20px; text-decoration:none;} 
.mypopup {background:url(shape.png) no-repeat; width:300px; height:146px; color:#0CF; display:none;} 
.mytext {position:relative; top:40px; left:20px;} 

XHTMLを使用して、それを隠すことができ

<div class="mylink"><a href="#">Here is my link</a></div> 
<div class="mypopup"><div class="mytext">The text here</div></div> 

jQueryの

$(document).ready(function(){ 
    $(".mylink a").mouseover(function() { 
     $(".mypopup").show(); 
    }); 
    $(".mylink a").mouseleave(function() { 
     $(".mypopup").hide(); 
    }); 
});