LI悬停并在单独的图层上显示额外的链接？

问题描述：

在上一个问题中，我解决了需要有一个LI悬停显示额外的链接（http://stackoverflow.com/questions/8364110/css-or-javascript-href-hover-or-mouseover-showing-additional -clickable链接）。LI悬停并在单独的图层上显示额外的链接？

现在，我试图解决一个需要有UL和LI的包裹在一个狭窄的DIV。目前，当隐藏链接显示时，它们会换行到下一行。我希望它们根据需要溢出，以允许链接出现在同一行而不改变包装的宽度。换句话说，我希望它使用类似z-index的东西来悬停线作为单独的图层。这可能与CSS？

这里是一个小提琴：在使用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>

喜欢这个？ http://jsfiddle.net/wTwAd/ – justis 2011-12-14 00:35:13

还是这个？ http://jsfiddle.net/WcQYk/ – Aaron 2011-12-14 00:46:42

答

，我认为这更像是你脑子里想的是什么：

http://jsfiddle.net/wTwAd/1/

它使用绝对定位的div位于每个列表项目之外。

嗨jblasco：其实，你的第一个解决方案的行为更像我脑海中的想法。我已经调整了链接文本的长度来说明。我希望链接显示在文本旁边。这里快速和肮脏的解决方案唯一的问题是，包装外的图标没有超链接。这里是更新的小提琴。有没有办法让这些链接真正超链接？这个解决方案非常接近。 http://jsfiddle.net/zenfiddle/wTwAd/2/ – webdude77 2011-12-14 03:06:30

答

我改变你的标记，使其更易于使用：

<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：

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

我使用不受旧的浏览器支持的一些选择，但你可以用类来完成相同的概念。

Demo

LI悬停并在单独的图层上显示额外的链接？

相关推荐