在上一个问题中,我解决了需要有一个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