0

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

我可以部分做到这一点，并将鼠标悬停在链接上会显示其余内容，但它也会将其下方的内容向下推。

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

请看这个小提琴'http://jsfiddle.net/3VyaC/'

4

2 回答 2

0

没有办法做到这一点。您实际上可以做到这一点的唯一方法是设置position: absolute;，但这会使链接位于下一个链接的顶部。所以基本上回答你的问题，没有办法用你设置的宽度来做到这一点。

于 2013-01-18T17:07:04.477 回答
0

看起来有点笨拙，但它接近您要拍摄的效果。只改变了你的 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;      
}

小提琴：http: //jsfiddle.net/y3Vkt/

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

希望这可以帮助！

于 2013-01-18T17:24:47.783 回答