：懸停不工作按預期

我想實現a:hover效果附着image.But我錯過了一些東西它不工作。可以請你指正。

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

來源

2013-03-13 Naju

發佈您的HTML代碼也 – Sowmya 2013-03-13 07:52:41

發佈工作示例演示您的問題會更好：http://jsfiddle.net – sweetamylase 2013-03-13 07:54:09

嘗試設置高度：自動爲a。 – 2013-03-13 07:54:28

在.short-by-list li，嘗試添加height:21px;

來源

2013-03-13 07:58:06 Jace

它的工作原理。標記爲答案。 :) – Naju 2013-03-13 08:50:20

我懷疑，這是因爲內<img>因素是漂浮，因此高t的<a>元素崩潰。嘗試設置overflow: hidden爲<a>。

如果全部失敗，請爲<a>設置明確的高度。

來源

2013-03-13 08:06:40 Terry

：懸停不工作按預期

回答

相關問題