a：悬停不能按预期工作

Question

我正在尝试实施a:hover效果，如附图所示。但我错过了一些不起作用的东西。请你纠正我。

HTML code：

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

CSS：

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

Answer 1

在.short-by-list li中，尝试添加height:21px;

Answer 2

我怀疑这是因为内部<img>元素已浮动，因此<a>元素的高度会崩溃。尝试为overflow: hidden设置<a>。

如果全部失败，请为<a>设置明确的高度。