html - :hover is not working as expected

Question

我正在尝试实现附件中的 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>

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;