LIは別のレイヤーに追加リンクを表示して表示しますか？

以前の質問では、余分なリンクを表示するLIのホバーが必要でした（http://stackoverflow.com/questions/8364110/css-or-javascript-href-hover-or-mouseover-showing-additional -clickable-links）。LIは別のレイヤーに追加リンクを表示して表示しますか？

今、私はULとLIを狭いDIVで包む必要性を解決しようとしています。現在、隠しリンクが表示されると、次の行に折り返されます。ラッパーの幅を変更せずにリンクを同じ行に表示させるために、必要に応じてオーバーフローさせたいと思います。言い換えれば、ホバーラインを別のレイヤーとして表示するZインデックスのようなものを使用してホバーしたいと思います。これはCSSで可能ですか？フィドルはI white-space: nowrapとoverflow: visibleを使用して迅速かつ汚いソリューションとしてlinked in my comment作品が、私はこれがより多くのあなたが考えていたもののようであると考えているがhttp://jsfiddle.net/zenfiddle/a88Cz/

<html> 
<style> 
#box1 {width:100px; background-color:yellow; z-index:1} 
li a img {display:none; margin-right:3px; z-index:1000} 
li:hover img {display:inline-block;} 
a {margin-right:20px;} 
a.extras {margin-right:3px;} 
</style> 
<body> 

<div id="box1"> 
<ul> 
    <li><a href="#">Link1</a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/doc-txt.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/flag.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/bubble.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/checkbox.png" /></a></li> 
    <li><a href="#">Link1</a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/doc-txt.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/flag.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/bubble.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/checkbox.png" /></a></li> 
    <li><a href="#">Link1</a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/doc-txt.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/flag.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/bubble.png" /></a><a class="extras" href="#"><img src="http://urlgreyhot.com/files/icons/png/12x12/checkbox.png" /></a></li> 
</ul> 
</div> 

</body> 
</html>

出典

2011-12-14 webdude77

このように、 http://jsfiddle.net/wTwAd/ – justis

またはこれ？ http://jsfiddle.net/WcQYk/ – Aaron

：

ここ

はフィドルですhttp://jsfiddle.net/wTwAd/1/

各リスト項目の外側に配置されたリンクの絶対配置されたdivを使用します。

出典

2011-12-14 01:13:28 justis

こんにちはjblasco：実際には、最初の解決策は、私が心に留めていたように動作します。説明するためにリンクテキストの長さを調整しました。私はリンクがテキストのすぐ隣に現れるようにしたい。クイックで汚れたソリューションの唯一の問題は、ラッパーの外側にあるアイコンがハイパーリンクされていないことです。ここで更新されたフィドルです。これらのリンクを実際にハイパーリンクにする方法はありますか？この解決策はとても近いです。 http://jsfiddle.net/zenfiddle/wTwAd/2/ – webdude77

jblasco：2番目の解決策は、長さが一様なリンクテキストにはうまく見えますが、さまざまな幅で、意図したとおりに動作しません。ここに私の更新されたフィドルです。 http://jsfiddle.net/zenfiddle/wTwAd/4/ – webdude77

Chromeのハイパーリンクとして機能します。http://jsfiddle.net/qjhEs/ – justis

私はそれが簡単で動作するように作るためにあなたのマークアップを変更する：私は古いブラウザでサポートされていないいくつかのセレクタを使用してい

#box1 {width:60px; background-color:yellow;} 
#box1 ul > li {position:relative;} 
#box1 ul li ul{display:none; background:yellow;} 
#box1 ul ul li {display:inline;} 
#box1 ul > li:hover ul{display:block; background:red; position:absolute; top:0; left:0;}

、しかし：

<div id="box1"> 
<ul> 
    <li><a href="#">Link1</a> 
     <ul> 
      <li><a href="#"><img src="" /></a></li> 
      <li><a href="#"><img src="" /></a></li> 
      <li><a href="#"><img src="" /></a></li> 
      <li><a href="#"><img src="" /></a></li> 
     </ul>  
    </li> 
</ul> 
</div>

とCSSクラスで同じ概念を達成することができます。

Demo

出典

2011-12-14 01:24:55 bookcasey

これはかなりクールなテクニックですが、http://jsfiddle.net/zenfiddle/wTwAd/2/のように、リンクテキストの隣に（リンクテキストではなく）リンクが表示されたかったのです。私はこの技術を将来参照します。ありがとうございました。 – webdude77

LIは別のレイヤーに追加リンクを表示して表示しますか？

答えて

関連する問題