0

CSSだけでこれをやりたいです。順序付けされていないリストといくつかのハイパーリンクされたリストアイテムがあり、リンク（リストアイテム）の幅と高さをwidth：300pxとheight：1.5emに制限したいと思います。したがって、リンクの長さに関係なく、最大300pxのリンクのみが表示され、残りは高さ制限とオーバーフローのために非表示になります：非表示。リンクの残りの部分をマウスホバーで表示したいと思います。

これを部分的に行うことができ、リンクにカーソルを合わせると残りのコンテンツが表示されますが、その下のコンテンツもプッシュダウンされます。

その下のコンテンツを押し下げることなく、マウスオーバーで残りのコンテンツを表示することは可能ですか？

このフィドルをご覧ください'http://jsfiddle.net/3VyaC/'

4

2 に答える 2

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〜2ピクセルのグリッチがあります。

お役に立てれば！

于 2013-01-18T17:24:47.783 に答える
0

これを行う方法はありません。実際にそれを行うことができる唯一の方法は設定することですposition: absolute;が、それはリンクを次のリンクの上に置くことになります。したがって、基本的にあなたの質問に答えるために、あなたがそれを持っているように設定された幅でこれを行う方法はありません。

于 2013-01-18T17:07:04.477 に答える