Question

我希望将鼠标悬停在页面上时弹出“弹出”链接，而不更改附近文本/元素的位置/流量。

参见随附的示例镜头。我很确定这是一个简单的位置技巧，但我无法让它正常工作。如果可能的话，我宁愿不要求任何JS。

alt text http://www.stokke.me/_misc/popout_illustration.png

非常感谢任何建议。

Answer 1

更新：跨浏览器支持

.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>

鼠标悬停时弹出/扩展链接而不更改文本/元素流

3 个答案: