Получение прямоугольника поле со стрелкой на hover ссылку в CSS

Question

Я пытаюсь получить прямоугольник окно со стрелкой на hover ссылки.

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

on hover this Я пытаюсь получить прямоугольник со стрелкой. Например, , как то, что у нас есть в 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.

Это легко :)

Answer 2

я думаю, что я прав, поэтому я отправляю это в ответ: что вы ищете это подсказка, и существует различные решения (с и без JavaScript) там. мой личный фаворит prototip 2.

, чтобы получить именно то, что делает facebook, this поможет вам (на основе coda popup bubbles).

EDIT:, если есть настройки уже подсказка и просто wan't использовать CSS похожи на один из Facebook, попробуйте использовать firebug (для Firefox, в IE просто нажать клавишу F12 и использовать инструменты для разработчиков ... хром тоже что-то вроде этого, попросите Google), чтобы проверить html и применяемые CSS-правила для этого.

Answer 3

Вы можете использовать css и jquery для достижения того, что вам нужно. Я сделал быстрый пример этого http://jsbin.com/amaga4

я использую три класса на ссылки, а mylink один для всплывающей DIV с именем mypopup и один для текста в всплывающем окне под названием mytext. mypopup div имеет display:none в css, чтобы скрыть его.

вы можете использовать JQuery и события mouseover и mouseleave для .mylink a и сделать видимыми DIV mypopup с помощью show() и скрыть его с помощью hide()

The 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(); 
    }); 
});