Question

在上一个问题中，我解决了需要有一个LI悬停，显示额外的链接（http://stackoverflow.com/questions/8364110/css-or-javascript-href-hover-or-mouseover-showing-另外，可点击链接）。

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

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

Answer 1

虽然小提琴我linked in my comment使用white-space: nowrap和overflow: visible作为快速而肮脏的解决方案，但我相信这更像你的想法：

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

它使用位于每个列表项外部的链接的绝对定位div。

Answer 2

我更改了您的标记，以便更轻松地使用：

<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悬停并在单独的图层上显示额外的链接？

2 个答案: