Выдвигать / разворачивать ссылки при наведении курсора без изменения потока текста / элементов

Question

Мне бы хотелось, чтобы ссылки появлялись на странице при наведении на них курсора без изменения положения / потока текста / элементов поблизости.

См. Прикрепленный пример выстрела. Я почти уверен, что это простой трюк с позицией, но у меня проблемы с его корректной работой. Я бы предпочел, чтобы это не требовало JS, если это возможно.

альтернативный текст http://www.stokke.me/_misc/popout_illustration.png

Любой совет очень ценится.

Answer 1

ОБНОВЛЕНО: Кросс-браузерная поддержка

ДЕМО: http://jsbin.com/anuka3/3

.zoom {
    position: relative;
    color: red;
}
.zoom span {
    display: none
}
.zoom:hover span {
    top: 0;
    left: -30px;
    bottom: -30px;
    display: inline-block;
    position: absolute;
    font-size: 40px;
    background: #333;
    color: #FFF;
    padding: 0 5px;
    margin: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.zoom:hover {
    text-decoration: none
}

Lorem Ipsum is simply <a class="zoom" href="#"><span>survive</span>survive</a> dummy text

Answer 2

Я думаю, что вы ищете всплывающую подсказку, вот чрезвычайно простая подсказка CSS, которую я часто использую, и которую можно стилизовать в любом случае:

CSS:

    a:hover 
{
background:#ffffff; 
text-decoration:none;
} /*BG color is a must for IE6*/

    a.tooltip span 
{
display:none; 
padding:2px 3px; 
margin-left:8px; 
width:130px;
}
    a.tooltip:hover span
{
display:block; 
position:absolute; 
background:#ffffff; 
border:1px solid #cccccc; 
color:#6c6c6c;
}

HTML:

    Roll me <a class="tooltip" href="#">Tooltip<span>
Tooltip contents.
</span></a>.

Если это смешивается с потоком вашего другого текста, добавьте z-index.

Надеюсь, это поможет вам:)

Answer 3

#Note:use hash(#) before Sitelinks

/* set size of links division and center on page */
#Sitelinks 
{
    margin-left: auto;
    margin-right: auto;
    background-color: #212121;
}

/* set font properties of links */
#Sitelinks p 
{
    font-family: arial, verdana, serif;
    font-size: 8pt;
    font-weight: 600;
    text-align: left;
    padding: 4px 0 0 25px;
}

/* set color of links and remove underline */
#Sitelinks a 
{
    color: #E5650A;
    text-decoration: none;
    position: relative;
}

/* set hover or roll over color of links */
#Sitelinks a:hover 
{
    background:#000000; 
    color: #ffafff;
    font-size: 30px;
    text-decoration: none;
}

#Sitelinks span 
{
    display:none; 
}

#Sitelinks a:hover span
{
    display: inline-block;
    font-size: 10px;
    background: #333;
    color: #FFF;
    padding: 0 5px;
    margin: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

<div id="Sitelinks">
    <a href="http://mixmasala.webfrnd.com">Mixmasala</a>
</div>