html - 使用 CSS 在鼠标悬停时显示不同的 'height' 链接

Question

我只想用 CSS 来做这件事。我有一个无序列表和一些超链接列表项，我想将链接(列表项)的宽度和高度限制为宽度:300px 和高度:1.5em。因此，无论链接的长度是多少，最多只能显示 300px 的链接，其余部分将因高度限制和 overflow:hidden 而隐藏。我想在鼠标悬停时显示其余链接。

我可以部分执行此操作，将鼠标悬停在链接上会显示其余内容，但它也会下推其下方的内容。

是否有可能在鼠标悬停时显示其余内容而不按下其下方的内容？

请看这个 fiddle 'http://jsfiddle.net/3VyaC/'

Answer 1

看起来有点笨拙，但它接近您要拍摄的效果。只改变了你的 CSS:

body {font-family: arial; font-size: 0.8em;}

.news-entry ul {    
    list-style-type: none;  
    padding: 0; 
    margin: 0 0 0 8px;  
    width: 300px;      
}

.news-entry li {
    border-top: 1px solid #dcdcdc;
    width:300px;
    height:1.5em;
    overflow:hidden;
    position:relative;
}

.news-entry li a.itemtitle {    
    display: block; 
    width: 100%;    
    padding: 4px 0 3px 0;   
    line-height: 1.5em; 
    text-decoration: none;
}

.news-entry li:hover {
    color: #333;    
    background-color: #fafafa;
    overflow:visible;
    z-index:10;    
}

.news-entry li:hover a{
    position:absolute;
    width:100%;
    background-color:#fafafa;
    border:1px solid #555;      
}

fiddle :http://jsfiddle.net/y3Vkt/

当链接更改为绝对位置时可能需要调整边距，存在 1-2 像素的故障。

希望这对您有所帮助!