FLOAT

Question

我正在尝试制作一个信息框（span），该信息框允许您将鼠标悬停在a和ul中的li上，且宽度受限div，然后让它出现。但是，它不起作用（注意：我没有在悬停中添加span来显示，但可以轻松地执行此操作：框未正确对齐;我希望它漂浮在它所属的字母的右边，间隔为5px。

如果有帮助，我首先尝试absolute定位无效。

-html -

<div id="album-select-side-panel">
        <ul>
            <li>
                <a href="#studio">S</a>
                <span class="asp-info">
                Studio Albums
                </span>
            </li>
            <li>
                <a href="#compilation">C</a>
                <span class="asp-info">
                Compilation Albums
                </span>
            </li><li>
                <a href="#live">L</a>
                <span class="asp-info">
                Live Albums
                </span>
            </li>
        </ul>
    </div>

-CSS -

#album-select-side-panel
    {
    float: left;
    width: 50px;
    background-color: white;
    height: 150px;
    vertical-align: middle;
    position: fixed;
    left: 10px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    top: 50%;
    margin-top: -60px;
    }

#album-select-side-panel ul
    {
    list-style-type: none;
    }

#album-select-side-panel ul li a
    {
    display: block;
    width: 40px;
    height: 40px;
    margin: 5px;
    background-color: #600;
    color: #FFF;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    text-align: center;
    line-height: 40px;
    transition: 350ms background-color;
    -moz-transition: 350ms background-color;
    -webkit-transition: 350ms background-color;
    }

#album-select-side-panel ul li a:hover
    {
    background-color: #ACD;
    }

#album-select-side-panel ul li .asp-info
    {
    left: 5px;
    z-index: 999;
    position: relative;
    background-color: black;
    border: 2px solid #EEE;
    color: #FFF;
    padding: 5px;
    float: left;
    text-align: center;
    white-space: nowrap;
    }

由于

Answer 1

您可以使用绝对定位，第二种方式是浮动A和LI（取决于HTML / CSS的其余部分）。

FLOAT

A和SPAN都浮动，他们的父母有overflow: hidden来清除浮动。然后我从UL（50px）中删除了宽度。

#album-select-side-panel {width: auto;}
#album-select-side-panel ul li {overflow: hidden;}
#album-select-side-panel ul li > * {float: left;}
#album-select-side-panel ul li > span {margin: 9px 0 0; display: none;}
#album-select-side-panel ul li:hover > span {display: block}

http://jsfiddle.net/5eLd4L2h/3/

绝对位置

这是绝对定位的解决方案：

#album-select-side-panel ul li {position: relative;}
#album-select-side-panel ul li .asp-info {position: absolute; top: 4px; left: 50px;}

http://jsfiddle.net/5eLd4L2h/4/

我只在底部添加了样式，你的样式是相同的，只需添加我的行： - ）

UL LI悬停跨度信息框不起作用

1 个答案:

FLOAT

绝对位置