Html 答：悬停未按预期工作

我正在尝试实现附加图像中的

a:hover

效果。但是我错过了一些它不起作用的东西。你能纠正我吗

HTML代码：

<ul class="short-by-list">
    <li class="right-mrgn">Make</li>
    <li>
    <a onclick="ajaxSearchLoad(5,49)" href="javascript:void(0)">
    <img class="SortPosition" alt="ascending" src="../images/nav-arrow.png">
    </a>
    <div class="tooltip-text" style="display: none;">
    <img class="tooltip-arrow" alt="Arrow" src="../images/tooltip-arrow.png">
    Sort by Ascending
    </div>
    </li>
    <li class="last">
    </ul>

---

在

.short by list li

中，尝试添加

高度：21px

我怀疑这是因为内部

元素已浮动，因此

元素的高度会塌陷。尝试为

设置

溢出：隐藏

如果这一切都失败了，那么为
设置一个显式的高度，然后发布HTML代码，并展示一个工作示例，演示您的问题会更好：尝试设置高度：自动a。最好创建一个简单的提琴。因为你的代码和你的截图不一样
.short-by-list {
    background: url("../images/short-bg.png") no-repeat scroll 0 0 transparent;
    float: left;
    height: 21px;
    margin: 0 6px 15px 0;
    padding: 0 6px 0 10px;
    width: 79px;
}
.short-by-list li {
    color: #FFFFFF;
    display: block;
    float: left;
    line-height: 21px;
    position: relative;
}
.short-by-list li .tooltip-text {
    left: -38px;
}
.short-by-list li.last .tooltip-text {
    left: -40px;
}
.short-by-list li.right-mrgn {
    margin-right: 9px;
    min-width: 29px;
}
.short-by-list li a {
    display: block;
    float: left;
    padding: 0 6px;
    text-decoration: none;
}
.short-by-list li:hover a, .short-by-list li.select a {
    background: url("../images/bg-hover.png") repeat-x scroll 0 0 transparent;
}
.short-by-list li.select .tooltip-text {
    display: block !important;
}