0

截屏

我正在尝试实现 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;
}
4

2 回答 2

1

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

于 2013-03-13T07:58:06.060 回答
1

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

如果一切都失败了，请为<a>.

于 2013-03-13T08:06:40.177 回答