화살표가있는 사각형 상자 가져 오기

Question

링크를 가리 키기 위해 화살표가있는 사각형 상자를 얻으려고합니다. 내가 화살표와 사각형 상자를 얻기 위해 노력하고 있어요이 호버에

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

. 예를 들어 Username을 가져 오면 페이스 북에있는 것과 같은 내용의 사각형 상자가 나타납니다.

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을 설정하십시오. 당신이 찾고있는 것은 툴팁이며, 다른 솔루션 (와 자바 스크립트없이)이 있습니다 :

그것은 내가 옳다는 생각

Answer 2

: 쉽게, 그래서 내가 대답으로 이것을 게시하도록하겠습니다 저 밖에. 내 개인 즐겨 찾기는 prototip 2입니다.

정확히 페이스 북이 무엇을 얻기 위해, this은 (coda popup bubbles 기준) 당신을 도울 것입니다.

편집 : 당신이 alredy 툴팁이 그냥 페이스 북의 하나의 CSS와 유사한 사용하는 wan't 경우, IE에서, 파이어 폭스 (firebug를 사용하려고 단지 F12을 눌러 개발자 도구를 사용하여 ... 크롬도 이런 일이있는 HTML과 그에 대한 적용 CSS-규칙을 검사) 구글을 부탁드립니다.

Answer 3

당신은 당신이 필요 달성하기 위해 CSS와 jQuery를 사용할 수 있습니다. 나는이 링크에 세 개의 클래스를 사용이 http://jsbin.com/amaga4

, mytext라는 팝업의 텍스트에 대한 mypopup 하나라는 팝업 DIV에 대한 mylink 일에 대한 빠른 예를했다. mypopup div는 CSS를 숨기기 위해 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(); 
    }); 
});