html - a：ホバーが期待どおりに機能していません

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;

Answer 2

内側の<img>要素が浮いているため、<a>要素の高さが崩れているのではないかと思います。overflow: hiddenの設定を試してください<a>。

すべて失敗した場合は、に明示的な高さを設定し<a>ます。